How to Use Bootstrap Datepicker in Laravel is the topic, we will discuss today. In this tutorial, we will demonstrate how to implement bootstrap in laravel. In this example, we use a simple jquery library. We will use the bootstrap-datepicker.js library for datepicker. If you newbie in Laravel then follows Laravel 5.7 Crud Tutorial Example.

We are going to Configure Laravel Project.

#1: Install Laravel 5.7 Project

composer create-project --prefer-dist laravel/laravel laravelbootstrapdatepicker

#2: Configure SQL Database

Now we can setup database credentials.

//.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravelbootstrapdatepicker DB_USERNAME=root DB_PASSWORD=

#3: Create Model and Migration File

php artisan make:model Datepicker -m

It will create the Datepicker.php file and also create a create_datepickers_table.php migration file.

public function up() { Schema::create('datepickers', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->date('date'); $table->timestamps(); }); }

Now, migrate table by the following command.

php artisan migrate

In the database, you can see the datepickers table.

#4: Create a View File

You can create a file in resources/views/datepicker.blade.php and put this following code in it.

<!-- datepicker.blade.php --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Laravel 5.6 CRUD Tutorial With Example </title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> </head> <body> <div class="container"> @if (\Session::has('success')) <div class="alert alert-success"> <p>{{ \Session::get('success') }}</p> </div><br /> @endif <h2>Laravel Bootstrap Datepicker Example Tutorial</h2><br/> <form method="post" action="{{url('datepicker')}}" enctype="multipart/form-data"> @csrf <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Name">Name:</label> <input type="text" class="form-control" name="name"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <strong>Date : </strong> <input class="date form-control" type="text" id="datepicker" name="date"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4" style="margin-top:60px"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> <script type="text/javascript"> $('#datepicker').datepicker({ autoclose: true, format: 'yyyy-mm-dd' }); </script> </body> </html>

#5: Create one controller

php artisan make:controller DatepickerController

It will build the controller file called DatepickerController.php.

//DatepickerController.php public function create() public function create() { return view('datepicker'); }

#6: Define Route

We register all route in a web.php file

Route::get('datepicker','DatepickerController@create'); Route::post('datepicker','DatepickerController@datePicker');

We need coding the datePicker() in sequence to store the date in the database.

//DatepickerController.php public function datePicker(Request $request) { $datepicker= new \App\Datepicker; $datepicker->name=$request->get('name'); $datepicker->date=$request->get('date'); $datepicker->save(); return redirect('datepicker')->with('success', 'Name and Date has been added in database'); }

After successfully save name and date into the database then you can see a success message on your screen.

Also, you can see the database in below screenshot to verify that date saved successfully.

Finally, Our How to Use Bootstrap Datepicker in Laravel is over. Thanks for taking.