admin 管理员组文章数量: 1087135
I am working on a Laravel project where I need to add a date field in the user profile section(a form). The date should:
- Be displayed in the format DD / MMM / YYYY (e.g., 25 / Jun / 2024).
- Allow users to edit/select the date.
- Send the date to the backend in a regular YYYY-MM-DD format when the form is submitted.
- Fetch the saved date from the backend and display it in the same DD / MMM / YYYY format when the page is visited.
I tried using <input type="date">, but it displays the date as 25/06/2025, which isn’t the desired format. I also tried following approach:
` {!! Form::select('day', range(1, 31), null, ['placeholder' => 'Day', 'class' => 'form-control']) !!} {!! Form::select('month', ['01' => 'Jan', '02' => 'Feb', '03' => 'Mar', ..., '12' => 'Dec'], null, ['placeholder' => 'Month', 'class' => 'form-control']) !!} {!! Form::select('year', range(date('Y'), 1900), null, ['placeholder' => 'Year', 'class' => 'form-control']) !!}
`The JavaScript code for aligning the number of days with the selected month and year, feels overly complex for such a simple requirement.
**Is there an easier way to: ** Display the date in DD / MMM / YYYY format. Allow users to edit/select the date. Fetch and display the saved date(dd-mm-yyyy) in the correct format(dd-mmm-yyyy or 16-05-2025) when the page is visited.
I am working on a Laravel project where I need to add a date field in the user profile section(a form). The date should:
- Be displayed in the format DD / MMM / YYYY (e.g., 25 / Jun / 2024).
- Allow users to edit/select the date.
- Send the date to the backend in a regular YYYY-MM-DD format when the form is submitted.
- Fetch the saved date from the backend and display it in the same DD / MMM / YYYY format when the page is visited.
I tried using <input type="date">, but it displays the date as 25/06/2025, which isn’t the desired format. I also tried following approach:
` {!! Form::select('day', range(1, 31), null, ['placeholder' => 'Day', 'class' => 'form-control']) !!} {!! Form::select('month', ['01' => 'Jan', '02' => 'Feb', '03' => 'Mar', ..., '12' => 'Dec'], null, ['placeholder' => 'Month', 'class' => 'form-control']) !!} {!! Form::select('year', range(date('Y'), 1900), null, ['placeholder' => 'Year', 'class' => 'form-control']) !!}
`The JavaScript code for aligning the number of days with the selected month and year, feels overly complex for such a simple requirement.
**Is there an easier way to: ** Display the date in DD / MMM / YYYY format. Allow users to edit/select the date. Fetch and display the saved date(dd-mm-yyyy) in the correct format(dd-mmm-yyyy or 16-05-2025) when the page is visited.
Share Improve this question asked Jan 7 at 22:10 Roshan BhusalRoshan Bhusal 112 bronze badges New contributor Roshan Bhusal is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 2- You might need to use a custom datepicker as the native input for date doesn't support that format out of the box. – Ridwan Kasim Commented Jan 7 at 22:57
- This thread has many answers to solve this on the client-side, not sure about the Laravel part however – Chris Haas Commented Jan 7 at 22:58
3 Answers
Reset to default 1You can approach it by collecting the date in its usual format from the $request from the frontend and then use Carbon object to parse the date to the dd/mm/YYYY format in your backend. You will need to include the Carbon package at the top of your class though before being able to use it
use Carbon/Carbon;
// Where $request->date is your date from the frontend
$formattedDate = Carbon::parse($request->date)->format('d/m/Y');
Solution Using Flatpickr/Carbon (it's a JavaScript Date Picker)
Let's say you'd like to work on your birthday date.
You can do something like this using Laravel
In your webpage
<!-- this is the CND (possibly to be put in the head) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- in the body of your web page add (in a form o where needed) -->
<input type="text" id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth', \Carbon\Carbon::parse($user->date_of_birth)->format('d / M / Y')) }}">
<script>
//small javascript for flatpickr (put it at any point on the page)
document.addEventListener('DOMContentLoaded', function () {
flatpickr('#date_of_birth', {
dateFormat: "d / M / Y", // Display format
altInput: true,
altFormat: "Y-m-d", // Submit format
defaultDate: "{{ old('date_of_birth', $user->date_of_birth ? \Carbon\Carbon::parse($user->date_of_birth)->toDateString() : '') }}",
});
});
</script>
Here's how to handle the date in the PHP controller
<?php
$validatedData = $request->validate([
'date_of_birth' => 'required|date|before:today',
]);
$user->date_of_birth = $validatedData['date_of_birth'];
$user->save();
?>
This is a very simple example but you can customize it to your liking in your project using JavaScript code for aligning the number of days and display them correctly.
The date input element will displays the date in the format matching the "the locale of the user's browser". So, you should not worry about how other users will see the date. If you find the date format not matching your personal preferences, try changing the language of your browser. In any case, the value of the date input element will always be the same, and that is yyyy-mm-dd. And this is the value that will be in the request to the server.
The date function in PHP should be able to interpreter this date string as a date.
document.forms.form01.date.addEventListener('input', e => {
console.log(e.target.value);
});<form name="form01">
<label>Date: <input type="date" name="date" required></label>
</form>本文标签：
版权声明：本文标题：javascript - How to display, edit, and save a date in DDMMMYYYY format in Laravel? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1736771924a1759023.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论