Bootstrap datetimepicker：无法选择“明天”作为日期答案

【问题标题】：Bootstrap datetimepicker: can't select "tomorrow" as dateBootstrap datetimepicker：无法选择“明天”作为日期
【发布时间】：2015-09-08 11:34:56
【问题描述】：

让我们举这个最小的例子：

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

而JS代码是：

var m = moment(new Date());

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

我们使用moment.js 获取今天的日期，然后设置日期时间选择器，以便您只能选择从明天开始的日期。

jsFiddle 在这里：http://jsfiddle.net/0Ltv25o8/1794/

我们遇到的问题是，尽管进行了上述设置，但用户无法选择明天作为日期。它不是灰显的，但是您尝试选择它并没有任何反应。这是为什么呢？

【问题讨论】：

标签： javascript momentjs bootstrap-datetimepicker

【解决方案1】：

只需将m.add(1, 'days') 替换为moment()，如下所示

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

Demo

更新：今天是灰色的。

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

Demo

【讨论】：

但是这样一来，今天就不会在日历中显示为灰色，这可能会让用户感到困惑。

【解决方案2】：

问题在于日期的时间部分。您的 minDate 实际上设置为明天和第二天之间的时间点。

只需删除时间部分即可解决您的问题（使用 moment.js 的 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
});

【讨论】：