Sometimes we need date type input filed in our web application. That time, we can use the default HTML 5 date type system. But this HTML 5 is not pretty good. That's why need more beautiful date format input field.
For that purpose, a flat picker or date picker is there. We can use one of them to generate a date input field. In this Laravel datepicker example, I will show you how to create a datepicker HTML form in Laravel using bootstrap 5 and flatpickr. Let's see how to add flatpickr in laravel 9.
Step 1: Download Fresh Laravel
In this first step, we need a fresh Laravel 9 application for the laravel datepicker bootstrap 5 tutorial. So download it by the below command:
composer create-project laravel/laravel example-app
Step 2: Create Route
Now in this, create a route like the one below to complete the laravel calendar bootstrap. So define the resource route like the below:
routes/web.php
<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TutorialController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('user', [TutorialController::class, 'index'])->name('user.index');
Route::post('user', [TutorialController::class, 'store'])->name('user.store');
Step 3: Create Views
We are almost there. Just we have to create two views files before completing laravel datepicker example tutorial
- welcome.balde.php
- app.blade.php
So create these files inside the following path and update them like below:
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
@stack('style')
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
Laravelia
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4" style="background-color: rgb(245, 245, 245);">
@yield('content')
</main>
</div>
@stack('script')
</body>
</html>
Now another one for date picker form.
resources/views/welcome.blade.php
@extends('layouts.app')
@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel 9 Date Picker Example With Bootstrap 5 | Laravelia</div>
<div class="card-body">
<form class="w-px-500 p-3 p-md-3" action="{{ route('user.store') }}" method="post">
@csrf
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Date</label>
<div class="col-sm-9 mt-2">
<input type="datetime-local" class="form-control" name="date">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label"></label>
<div class="col-sm-9">
<button type="submit" class="btn btn-success btn-block text-white">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
flatpickr("input[type=datetime-local]");
</script>
@endpush
Step 4: Create Controller
Now in this step, we have to create a TutorialController to define this method to create those two methods.
php artisan make:controller TutorialController
Now update the controller like the below:
app/Http/Controllers/TutorialController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TutorialController extends Controller
{
public function index()
{
return view('welcome');
}
public function store(Request $request)
{
return $request;
}
}
Now if you submit the form, you will see the following output:
{
"_token": "aYCqTJQLCFWlnBwrKrnOCvHgugr2rkyoPk1d1YVn",
"date": "2023-02-10"
}
Read also: Multiple Select Dropdown With Checkbox In PHP Laravel
Conclusion
Hope this date picker laravel tutorial will help. After completing this laravel datepicker example tutorial, your concept will be clear about datepicker bootstrap 5 example. Hope laravel datepicker bootstrap 5 tutorial will clear your concept about how to add datepicker in laravel 9.
