CODEWITHSUNDEEP
javascriptmomentjsbootstrap-datetimepicker
PaulJ
PaulJ

Reputation: 1718

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

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?

Upvotes: 2

Views: 2674

Answers (2)

Elyor
Elyor

Reputation: 5532

just replace m.add(1, 'days') with moment() as below

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

Demo

Updated: today is greyed.

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

Demo

Upvotes: 2

mgrim
mgrim

Reputation: 1302

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
});

Upvotes: 1

Related Questions