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:
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:
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.
You 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>