Bootstrap datetimepicker: can't select "tomorrow" as date

Question

Let's take this minimal example:

<div class="row">
<div class="col-md-12">
     <h6>datetimepicker1</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>
</div>

And the JS code is:

var m = moment(new Date());

$('#datetimepicker').datetimepicker({
    minDate: m.add(1, 'days'),
    ignoreReadonly: true,
    format: 'DD/MM/YYYY',
    allowInputToggle: true,
    defaultDate: false,
    useCurrent: false
});

We are using moment.js to get today's date, and then set up the datetimepicker so that you can only select dates starting from tomorrow.

The jsFiddle is here: http://jsfiddle.net/0Ltv25o8/1794/

The problem we are having is that, despite the above setup, the user cannot select tomorrow as the date. It's not greyed out, but you try to select it and nothing happens. Why is that?

Answer 1

The problem is the time part of the date. Your minDate is actually set to a point in time between tomorrow and the following day.

Simply removing the time part should solve your problem (using moment.js's startOf).

var m = moment(new Date());

$('#datetimepicker').datetimepicker({
    minDate: m.add(1, 'days').startOf('day'),
    ignoreReadonly: true,
    format: 'DD/MM/YYYY',
    allowInputToggle: true,
    defaultDate: false,
    useCurrent: false
});