Search code examples
jquerydatetimepickerbootstrap-datetimepicker

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.

Solution

  • 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