Boostrap DateTimePicker Functions & Example

Boostrap DateTimePicker Functions & Example

DateTimePicker With Bootstrap. Today we are going to show you, how to use boostrap datetimepicker in your html or views file. In this boostrap datetimepicker we will also use of calender icons on with our inputs box. We also discuss about Boostrap 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 Datetimepicker Example

We use latest jquery js , boostrap css & js and boostrap 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 &amp; 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 boostrap 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 boostrap 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>

One reply to Boostrap DateTimePicker Functions & Example

  1. very nice .really helps to me

Leave a Reply

Your email address will not be published. Required fields are marked *