How to Implement Datepicker in Laravel 12 with Bootstrap 5
As a web developer, I often need to add user-friendly features like datepickers to my Laravel projects to improve the user experience. When I started working with Laravel 12 and Bootstrap 5, I found that integrating a datepicker is straightforward and effective for collecting date inputs.
In this article, I’ll walk you through the process of adding a Bootstrap 5 datepicker to your Laravel 12 application in a simple and beginner-friendly way. Whether you’re building a form for event scheduling or user registration, this guide will help you implement a clean and responsive datepicker.
Step-by-Step Guide to Implement Bootstrap 5 Datepicker in Laravel 12
Step 1: Set Up Your Laravel 12 Project
First, I make sure I have a fresh Laravel 12 project. If you don’t have one, you can create it using Composer:
composer create-project --prefer-dist laravel/laravel laravel-datepicker
Once the project is set up, I navigate to the project directory:
cd laravel-datepicker
Step 2: Install Bootstrap 5
To use Bootstrap 5, I include it via a CDN for simplicity. In my resources/views/layouts/app.blade.php, I add the Bootstrap 5 CSS and JS files in the <head> and <body> sections, respectively. Here’s how I do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Laravel Datepicker')</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
@yield('content')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This sets up Bootstrap 5 in my project, ensuring a responsive design for the datepicker.
Step 3: Add Bootstrap Datepicker Library
Bootstrap 5 doesn’t have a built-in datepicker, so I use the bootstrap-datepicker library, which works well with Bootstrap 5. I include it via CDN in my app.blade.php file, right after the Bootstrap JS:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
Since bootstrap-datepicker requires jQuery, I include that as well.
Step 4: Create a Route and Controller
Next, I create a route to display a form with the datepicker. In routes/web.php, I add:
use App\Http\Controllers\DatepickerController;
Route::get('/datepicker', [DatepickerController::class, 'index'])->name('datepicker.index');
Then, I generate a controller:
php artisan make:controller DatepickerController
In app/Http/Controllers/DatepickerController.php, I add a simple method to return a view:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DatepickerController extends Controller
{
public function index()
{
return view('datepicker');
}
}
Step 5: Create the Datepicker View
I create a Blade view at resources/views/datepicker.blade.php to display the form with the datepicker:
@extends('layouts.app')
@section('title', 'Laravel 12 Datepicker Example')
@section('content')
<div class="container mt-5">
<h1>Select a Date</h1>
<form>
<div class="mb-3">
<label for="datepicker" class="form-label">Choose a Date</label>
<input type="text" class="form-control" id="datepicker" name="date" placeholder="Select a date">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
$(document).ready(function() {
Hints $('#datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true
});
});
</script>
@endsection
This code creates a simple form with a datepicker input field and initializes the datepicker using jQuery.
Step 6: Test the Datepicker
I run the Laravel development server:
php artisan serve
Then, I visit http://localhost:8000/datepicker in my browser to test the datepicker. The input field should display a calendar when clicked, allowing users to select a date.
Step 7: Customize the Datepicker (Optional)
To make the datepicker more user-friendly, I can customize it by adding options to the JavaScript code in datepicker.blade.php. For example:
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
startDate: new Date(),
maxViewMode: 2,
language: 'en'
});
This sets the date format, closes the calendar after selection, highlights today’s date, restricts past dates, and sets the language.
Conclusion
Integrating a Bootstrap 5 datepicker into Laravel 12 is a simple process that enhances the user experience of your forms. By following these steps, I was able to create a clean and responsive datepicker that works seamlessly with Laravel’s Blade templating system.
This feature is perfect for applications requiring date inputs, such as event planners or booking systems. With a little customization, you can tailor the datepicker to fit your project’s needs. I hope this guide helps you add a datepicker to your Laravel 12 project with ease!
Frequently Asked Questions(FAQs)
1. What is a datepicker in Laravel?
A datepicker is a user interface element that allows users to select a date from a calendar popup. In Laravel, it can be implemented using JavaScript libraries like bootstrap-datepicker to enhance form functionality.
2. Why use Bootstrap 5 for a datepicker in Laravel 12?
Bootstrap 5 provides a modern, responsive design framework, and when paired with bootstrap-datepicker, it offers a lightweight and customizable datepicker solution that integrates well with Laravel.
3. Do I need to install any packages for this datepicker?
No, you can use CDNs for Bootstrap 5, jQuery, and bootstrap-datepicker, as shown in the guide. However, you can also install them via npm for a more integrated setup.
4. Can I use another datepicker library with Laravel 12?
Yes, you can use other libraries like Flatpickr or jQuery UI Datepicker. The process is similar: include the library, add an input field, and initialize the datepicker with JavaScript.
5. How can I validate the date input in Laravel?
You can add validation rules in your controller, such as 'date' => 'required|date', to ensure the date input is valid before processing the form.
You might also like :
- Read Also: How to Handle Multi-Step Form Validation in Laravel
- Read Also: How to Change Date Format in Laravel 12
- Read Also: How to Check Date is Past in Laravel 11 Carbon
- Read Also: Creating Vue 3 Datepicker with Tailwind CSS 3
