Question 421007 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to display, edit, and save a date in DD / MMM / YYYY format in Laravel?

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.

Tags:

2

Answers


  1. 0

    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');
    Login or Signup to reply.
  2. 0

    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" class="form-control" value="{{ old('date_of_birth', CarbonCarbon::parse($user->date_of_birth)->format('d / M / Y')) }}">

<script>
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 ? CarbonCarbon::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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search