Bootstrap DateTime Picker Function Example

BootStrap DateTime Picker example. Through this tutorial, i am going to show you how to use bootstrap datetime picker.

And as well as, i will show you how to change date format, disable next and previous date and disable current date in bootstrap datetime picker.

Bootstrap DateTime Picker Example

Create datetime picker using jquery and bootstrap:

  • Create a html form
  • Import JavaScript & CSS Library into HTML Form
  • Initialize Bootstrap Datepicker Plugin
  • Current Date False in BootStrap DateTime Picker
  • How to disable previous date in Bootstrap DateTime Picker
  • How to disable Next date in Bootstrap DateTime Picker
  • Bootstrap Change Date Format

Create a html form

Create html file and add the following code into it:

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

Import JavaScript & CSS Library into HTML Form

Import javascript and css library into your html form for creating a datetime picker; So add the following libraries into your HTML form:

<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">

Initialize Datepicker Plugin

Intialize bootstrap datetime picker. so add the following code into your file:

<script>
$(function () {
  $('#example1').datetimepicker();
});
</script

Current Date False in BootStrap DateTime Picker

Default current date false:

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

How to disable previous date in Bootstrap DateTime Picker

Use this function to set minDate in Datetimepicker, you can disable previous date:

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

How to disable Next date in Bootstrap DateTime Picker

Use this function to set maxDate in Datetimepicker. You can only select previous dates using this functions:

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

Bootstrap Change Date Format

Use the below functions to change date format

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

Leave a Comment