Bootstrap DatePicker 使用 onRender 禁用许多日期

Question

我正在使用 eyecon 的 Bootstrap Datepicker 插件，可在此处找到 - http://www.eyecon.ro/bootstrap-datepicker/

我正在尝试使用onRender 事件来禁止选择许多日期。我需要为 Checkin 和 Checkout 禁用今天之后的所有日期（未来日期）。 Checkout 还需要任何等于或早于 Checkin 禁用的日期。 Checkin 工作完美，但 Checkout 根本不工作。

很确定问题是我没有正确返回值，因为我的逻辑似乎很好。

这是我的尝试，使用 Datepicker 网站上的示例代码：

HTML：

Check in: <input type="text" class="span2" value="" id="dpd1"></input>
Check out: <input type="text" class="span2" value="" id="dpd2"></input>

JS：

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dpd1').datepicker({
    onRender: function (date) {
        return date.valueOf() < now.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function (ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.setValue(newDate);
    }
    checkin.hide();
    $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
    onRender: function (date) {
        return (date.valueOf() > now.valueOf()) && (date.valueOf() <= checkin.date.valueOf()) ? 'disabled' : '';
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

WORKING DEMO

Answer 1

您需要检查所选日期是否小于和不大于结帐日期。

 if (ev.date.valueOf() < checkout.date.valueOf()) {

并且用于结帐的 onRender 方法正在检查日期是否早于今天并且早于签入日期，这永远不会是真的。您应该检查它在签入日期和今天之间的情况。希望这是你想要的。

onRender: function (date) {
    return (date.valueOf() < now.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
}

演示fiddle