Vivek Padhye Vivek Padhye - 19 days ago 6
jQuery Question

Datetimpicker disable past times for today, enable for tommorow

This is my jsfiddle: http://jsfiddle.net/vivpad/7s0a7m3p/7/

I am using http://eonasdan.github.io/bootstrap-datetimepicker/ with moment.js


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


My JQuery code is as follows

$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY'
});

$('#datetimepicker2').datetimepicker({
format: 'LT'
});


I need following:


  • If date selected is todays date, then in timepicker one should not be able to select previous time. Eg if I select todays date and current time is 2:11pm hen one should not be able to select 2:10 or before.

  • If Date selected is tomorrows or any date further, then the minimum time available to selection should be 10:00 AM.

  • In both the cases Max time available for selection should be 5:00 PM and not above that.

  • All previous dates before today should be disabled.


Answer

Try this

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

        <div class="form-group">
            <div class="input-group date" id="datetimepicker">
                <input type="text" class="form-control" />  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
</div>

JS

$(function () {     
            $('#datetimepicker').datetimepicker({ 
             format : 'DD/MM/YYYY HH:mm',
            minDate: moment().add(1, 'h'),enabledHours: [10, 11, 12, 13, 14, 15, 16,17]
                });

        });

Fiddle demo