How to Add and Use Bootstrap Datepicker in Laravel 8

Last updated on: by Editorial Team

In this quick bit-by-bit guide, we will explain how to add and use Bootstrap calendar in Laravel8 application with the help of Bootstrap CSS UI framework.

A date picker, popup calendar, date and time picker, or time picker is a graphical user interface component that lets the user to choose a date and time from a specific range date and time range.

It consists of a simple input field with the calendar icon; by clicking on this input element, a popup appears on the screen through which the user can select the date and time.

Bootstrap datepicker is an awesome tool that gives an easy way to integrate datepicker widget in laravel; its design is ready to use and highly useful to manage dates and time. We will take the help of the jQuery library to implement and use the bootstrap date picker in the laravel app.

Create Laravel App

We assume you have already pre-installed the Composer tool; after that, execute the suggested command to install the latest laravel application.

Although, you may skip installation if the app is already installed on your system.

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

Next, get into the newly created app directory:

cd laravel_datepicker

Implement Bootstrap Datetime Picker in Laravel

In this step, you will integrate date time picker in Laravel application, import Bootstrap CSS, JavaScript via CDN, and import moment js and Bootstrap datetime picker CSS.

Then call the datetimepicker() method at the bottom to display and use the date picker in the laravel app.

Open and add recommended code in resources/views/welcome.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Integrate Bootstrap Datepicker in Laravel </title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
</head>

<body>
   <div class="container mt-5" style="max-width: 450px">
        <h2 class="mb-4">Laravel Bootstrap Datepicker Demo</h2>

        <div class="form-group">
            <div class='input-group date' id='datetimepicker'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
            </div>
        </div>
   </div>
</body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">
        $(function() {
           $('#datetimepicker').datetimepicker();
        });
    </script>    
</html>

Start Laravel Project

Lastly, type the given below command on the command prompt and execute the given below command and recklessly start the laravel development server.

php artisan serve

You may check the app by using the below url on the browser:

http://127.0.0.1:8000

Use Bootstrap Datepicker in Laravel

Conclusion

Laravel bootstrap datetimepicker tutorial is over; throughout this guide, we shared the simple and immaculate example on how to add moment js in laravel to implement and use the data and time picker in the laravel app using the bootstrap datetime picker module.