How to Add Flatpickr DateTime in Laravel 10

Hello developers! In this guide, I'll take you through the process of enhancing your Laravel 10 application by integrating Flatpickr with DateTime functionality and displaying human-friendly dates. Flatpickr is a versatile date and time picker library that brings simplicity and elegance to your application's date selection.

In this tutorial, I'll give you an example of datetime picker and a human-friendly date picker.

So, let's see how to add flatpickr datetime in laravel 10, flatpickr date-time picker, flatpickr date and time, date time picker jQuery, and human-friendly dates date picker.

Step 1: Install Flatpickr via CDN

Include Flatpickr via CDN in your Blade layout file (e.g., resources/views/layouts/app.blade.php) within the <head> section:

<!-- Add this to the head section of your layout file -->
<link rel="stylesheet" href="">
<script src=""></script>


Step 2: Create a Blade View with DateTime Picker

Create a new Blade view (e.g., resources/views/flatpickr.blade.php). This view will contain a form with a DateTime input field:


    <div class="container">
        <form action="{{ route('save.datetime') }}" method="POST">
            <label for="datetimepicker">Select a Date and Time:</label>
            <input type="text" id="datetimepicker" name="selected_datetime">
            <button type="submit">Save DateTime</button>

        // Initialize Flatpickr with DateTime functionality
        flatpickr("#datetimepicker", {
            enableTime: true, // Enable time selection
            dateFormat: "Y-m-d H:i", // Customize the date and time format as needed

Human-friendly Dates

        // Initialize Flatpickr with DateTime functionality
 flatpickr("#datetimepicker", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",


Step 3: Create a Controller and Route

Generate a controller using the Artisan command:

php artisan make:controller FlatpickrController

In your FlatpickrController.php, add methods to show the view and save the selected DateTime:

use Illuminate\Http\Request;

class FlatpickrController extends Controller
    public function showForm()
        return view('flatpickr');

    public function saveDateTime(Request $request)
        // Handle saving the selected DateTime logic
        // $request->input('selected_datetime') contains the selected DateTime

Add the corresponding routes in web.php:

use App\Http\Controllers\FlatpickrController;

Route::get('/flatpickr', [FlatpickrController::class, 'showForm']);
Route::post('/save-datetime', [FlatpickrController::class, 'saveDateTime'])->name('save.datetime');


Step 5: Test Your Enhanced Flatpickr Implementation

Run your Laravel application:

php artisan serve

And that's it! You've successfully added Flatpickr DateTime functionality and displayed human-friendly dates in your Laravel 8/9/10 application.


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.