DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

Bootstrap DateTimepicker Example

In this article, we will see how to implement a bootstrap date time picker with an example, bootstrap 4 date time picker is used to dispaly date as well as time in html, php, or any laravel file.

So, let's see bootstrap 4 datetimepicker, jquery date time picker, date time picker bootstrap, bootstrap 5 datetimepicker example, date time picker jquery.

Here, we will use use some jquery, css, and js and bootstrap datetime-picker css and js for this date time picker example, jquery datepicker time provide many customised functionalities to user.

First of all, we need to add JS and CSS in your head section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Enter fullscreen mode Exit fullscreen mode

Read Also : Laravel 8 Mobile Number OTP Authentication using Firebase


Now we will add a bootstrap DateTime picker. So, add the below code in your file.

<div class="container">
  <br><br><br>
  <div class='col-sm-6'>
      <div class="form-group">
        <label for="">Date and Time</label>
          <div class='input-group date' id='datetime'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
      </div>
  </div>
</div>

<script>
$(function () {
  $('#datetime').datetimepicker();
});
</script>
Enter fullscreen mode Exit fullscreen mode

If you want to disable it to select the current date then add below code.

<script type="text/javascript">
    $(function () {
        $('#example').datetimepicker({
          useCurrent: false,
        });
    });
</script>
Enter fullscreen mode Exit fullscreen mode

Read Also : Laravel Accessor and Mutator Example


If you want to set minimum date then below function is useful.

<script type="text/javascript">
    $(function () {
      $('#mindate').datetimepicker({
          minDate : new Date(),
      });
    });
</script>

Enter fullscreen mode Exit fullscreen mode

Also, you can change the date formate as well as per your requirement.

<script type="text/javascript">
    $(function () {
      $('#dateformat').datetimepicker({
         format:'Y-M-d'
      });
    });
</script>

Enter fullscreen mode Exit fullscreen mode

You might also like :

Top comments (0)