How to disabled past Date and future time in bootstrap DateTimepicker..?

Question

I want disabled past date when select date and disabled future time when select time in datetimepicker.

I tried below code but it doesn't work.

Please Check Fiddle

 HTML :

<div class="row">
    <div class="col-md-12">
         <h6>datetimepicker1</h6>

        <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-calendar glyphicon"></span></span>
            </div>
        </div>
         <h6>datetimepicker2</h6>

        <input type="text" class="form-control" id="datetimepicker2" />
    </div>
</div>

JS :

$('#datetimepicker1').datetimepicker({
    viewMode: 'days',
    format: 'DD-MM-YYYY HH:mm',
    maxDate: new Date(),
    minDate:moment()
});

I want past dates disabled and future time disabled.

For Ex :

• Today 14-09-2017 then i want disabled all previous date in calendar like 10,12,13 etc this all previous date should be disabled.

• In 24 hours time format Current Time is 12:00 then disabled all Future Hours and Minute in time selection like 13:00,14:00,15:00 etc time should be disabled.

Please Help.

Answer 1

Datetimepicker allows an option named as enabledHours. This option can be helpful https://eonasdan.github.io/bootstrap-datetimepicker/Functions/#endisabledhours

Here is a code snippet where we get the current hour and calculate the past hours and pass that as the enabled hours array

var currentdatetime=new Date();
var currenthour = currentdatetime.getHours();

var hourstoenable = new Array();
for (var i = 0; i <= currenthour; i++) {
  hourstoenable.push(currenthour-i);
}


$('#datetimepicker1').datetimepicker({
    viewMode: 'days',
    format: 'DD-MM-YYYY HH:mm',
    minDate:moment(),
    enabledHours: hourstoenable
});