Bootstrap 4/5 DateTimePicker Functions & Example

DateTimePicker With Bootstrap 4/5. Today we are going to show you, how to use bootstrap datetimepicker in your html or views file. In this bootstrap datetimepicker we will also use of calender icons on with our inputs box. We also discuss about Bootstrap DateTimePicker Intialization and fucntions.

When we creating a form with diffrent diffrent fields, we need to require some , dates field , time field, and datetime fields. Also we will discuss datetimepicker functions.

Bootstrap 4/5 DateTimePicker Functions & Example

We use latest jquery js , bootstrap css & js and bootstrap datetime-picker css & js for this date time picker example.

Create a html form

First we need to create a html form. so create html form with name as you want.

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

Add js css file

We will need to bootstrap js and css files for creating a datetimepicker. so follow next steps.

After create a html form, adding Bootstrap-DateTimepicker on html form, your webpage head section ( ) put your js and css file below here :

<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

Now we need to intialize bootstrap datetime-picker. so create script tag like below and intialize your datetime-picker and put this script tag after closing of body tag.

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

Current Date False

This is used for show unselect default current date.

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

Set Min Date

How to disable previous date? . Use this function to set minDate in Datetimepicker.
You can only select next dates using this functions.

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

Set Max Date

How to disable next date? . 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>

Change DateFormat

Use the below functions to change date format

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