How to Use Bootstrap Datetimepicker in Laravel PHP

Throughout laravel 9 bootstrap datetime picker example tutorial we will show you How to add and use Bootstrap Datetimepicker in Laravel application with the help of Bootstrap CSS UI framework.

Bootstrap DateTime picker is very useful to enable input field for date and time entry. DateTime picker provides a user-friendly way to select date and time. The user can select date and time from the DateTime picker dialog without typing manually in the input field. The DateTimePicker plugin helps to add DateTime picker in the input element of the form using jQuery. It provides an instant solution to add datetimepicker popup in a form field for selecting date and time in the website.

You can allow the user to select day, month, year, hour, and minute with one click from DateTimePicker. So let’s add and use the Bootstrap Datetimepicker easy way step by step in laravel 5, 6, 7, 8 and 9 app.

Step 1: Add Datetime Picker option in Blade File

First you need to add a input box for date time picker in your blade file just like bellow code.

<div class="container">
  <form method="post">
    <div class="row form-group">
      <div class="col-md-2">
          Appointment Time 
      </div>
      <div class="col-md-8">
        <input type="text" class="form-control datetimepicker" name="Appointment_time"> 
      </div>
    </div>
  </div>
</div>

Step 2: Ass CDN

Now add the below libraries in your layout file or your blade file.

<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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Step 3: Add Js

Now add the js for initialing to datetimepicker, here we use data time picker using class name you can use it using ID.

$(function () {
    $('.datetimepicker').datetimepicker();
});

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.

I hope its work for your this example work for adding bootstrap date time picker in your laravel project or you can use in any other framwork or cms easily.