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.
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="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Create a new Blade view (e.g., resources/views/flatpickr.blade.php). This view will contain a form with a DateTime input field:
@extends('layouts.app')
@section('content')
<div class="container">
<form action="{{ route('save.datetime') }}" method="POST">
@csrf
<label for="datetimepicker">Select a Date and Time:</label>
<input type="text" id="datetimepicker" name="selected_datetime">
<button type="submit">Save DateTime</button>
</form>
</div>
<script>
// 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
});
</script>
@endsection
Human-friendly Dates
<script>
// Initialize Flatpickr with DateTime functionality
flatpickr("#datetimepicker", {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
});
</script>
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');
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:
- Read Also: How to Use Flatpickr in Laravel 10
- Read Also: Bootstrap 5 Datepicker Using jQuery UI
- Read Also: Carbon Add Days To Date In Laravel
- Read Also: How To Display Month And Year In Bootstrap 5 Datepicker
