How to Integrate and Use Bootstrap Datepicker in Laravel 9

Laravel Bootstrap Date Time Picker tutorial; We will teach you how to integrate bootstrap datepicker in the laravel app.

You can use this laravel bootstrap datepicker example to create the handy calendar component for choosing a date and time.

We are sure you work with the calendar a lot; it helps organise events in the future. You choose dates from the calendar component to create events; datepicker is the tool you rely on a lot to deal with dates.

A date picker is a popup that holds the calendar widget, which usually appears on the screen when clicked on the form input element.

You choose dates from the calendar popup; you can go back and forth to choose the dates you want to associate your work with.

Download Laravel Project

We know you have created the project in advance. However, if not, you may use the suggested command to start downloading the laravel app from scratch.

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

Get into the downloaded project.

cd professor_proton

Create Calendar View File

Get inside the resources/view folder, create the calendar.blade.php file, now we have to place the bootstrap, DateTime picker CSS jQuery, moment js, and bootstrap scripts inside the head and footer section, respectively.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Bootstrap Date Time Picker Example</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>
 
</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>

Create Bootstrap Date Time Picker

Integrating or creating a DateTime picker calendar is not rocket science if we have added the required CSS and scripts, use the form-group class as a wrapper, define the id which triggers the DateTime picker widget in view.

Update resources/views/calendar.blade.php file:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Bootstrap Date Time Picker Example</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="form-group">
        <div class='input-group date' id='CalendarDateTime'>
        <input type='text' class="form-control" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </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() {
           $('#CalendarDateTime').datetimepicker();
        });
    </script>    
</html>

View Bootstrap Datepicker in Browser

Now, you are ready to launch the app, run the provided command using the command line tool.

There after paste the given url in the browser’s address bar.

php artisan serve
http://127.0.0.1:8000

Laravel Bootstrap Datepicker

Conclusion

We collided Laravel framework and Bootstrap CSS framework to create a pragmatic and beautiful explosion of the date-time picker component in laravel.

This quick tutorial will surely quench your thirst for gaining laravel and bootstrap knowledge.

We have learned how to add bootstrap datepicker in the laravel app using the bootstrap-datetimepicker library.

We are sure we have left you with a big smile on your face.