How to use bootstrap -3 Date time picker

on

Include following file in following sequence :-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

HTML code of date time picker :-
<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

Validation code for date time picker :-
<script type="text/javascript" >
 $(document).ready(function(){
  var startDate = new Date();
  var endDate = startDate.setMinutes(startDate.getMinutes() + 30);
  $(function () {
  $('#datetimepicker1').datetimepicker({
   icons: {
    time: "fa fa-clock-o",
    date: "fa fa-calendar",
    up: "fa fa-arrow-up",
    down: "fa fa-arrow-down"
   },
   defaultDate : startDate,
   ignoreReadonly: true
  });
   
  $('#datetimepicker2').datetimepicker({
   icons: {
    time: "fa fa-clock-o",
    date: "fa fa-calendar",
    up: "fa fa-arrow-up",
    down: "fa fa-arrow-down"
   },
   defaultDate : endDate,
   ignoreReadonly: true
  });
   
  $('#datetimepicker1').data("DateTimePicker").minDate(startDate);
  $('#datetimepicker2').data("DateTimePicker").minDate(endDate);
  
  $("#datetimepicker1").on("dp.change", function (e) {
   var mindate =  new Date(e.date); 
   mindate.setMinutes(mindate.getMinutes() + 30);
   $('#datetimepicker2').data("DateTimePicker").minDate(mindate);   });
  $("#datetimepicker2").on("dp.change", function (e) {
   var maxdate =  new Date(e.date); 
   maxdate.setMinutes(maxdate.getMinutes() - 30);
   $('#datetimepicker1').data("DateTimePicker").maxDate(maxdate);   });
   
  });
 });
</script>
Snapshot of date time picker :-
It's example of how to apply default, minimum and maximum date-time. Here only one example you can see more example in bootstrap date-time picker doc.
Resource :-
https://eonasdan.github.io/bootstrap-datetimepicker/
https://github.com/Eonasdan/bootstrap-datetimepicker

Comments

Post a Comment