How to Use Bootstrap Datepicker in Laravel

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.

How to Use Bootstrap Datepicker in Laravel

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');

Laravel Bootstrap Datepicker Tutorial

#7: Store date to the database

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.

Laravel Bootstrap Datepicker Example

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

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.