Question

我尝试使用datepicker boostrap为简单的签入/结帐系统设置2个日期选择器：http://www.eyecon.ro/bootstrap-datepicker/

这是我的代码：

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

    var checkin = $('#searchtype_checkin').datepicker({
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        },
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + 2);
            checkout.setValue(newDate);
        }
        checkin.hide();

        $('#searchtype_checkout')[0].focus();
    }).data('datepicker');

    var checkout = $('#searchtype_checkout').datepicker({
        onRender: function (date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        },
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');

我从文档中获得了大部分代码。我刚做了一点改变。这里是我想要应用的逻辑：

在签到后选择一个日期后，我想在结帐日期选择器中禁用此日期之前的所有日期，以避免在签到之前结账，并专注于直接在结账时结账＆＃39; changeDate＆＃ 39;签到。

一切运作良好但是如果我在第一次选择的日期之前将签到日期改为日期，则结账功能＆＃34; onRender＆＃34;没有再次调用，之前在结帐日期选择器上禁用的所有日期仍然被禁用。

如何在结帐日期选择器上再次调用onRender事件？我希望在每次＆＃34; changeDate＆＃34;之后调用此函数。签到。

Answer 1

您可以使用onSelect of datepicker选项，而不是现在使用的任何内容。

 var checkin = $('#searchtype_checkin').datepicker({
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        },
        format: 'dd/mm/yyyy',
        onSelect: function(selected) {
                var date=new Date(selected)
                day=date.getDate()+2;
                newDate=date.getMonth()+1 + "/" + day + "/" + date.getFullYear();
                $("#searchtype_checkout").datepicker("option","minDate", newDate);
        }
});

编辑 - 您也可以将onSelect添加到结帐日期，这样当用户首先选择结帐日期时，所有以后的日期都会在签入日期被禁用。

var checkout = $('#searchtype_checkout').datepicker({
        onRender: function (date) {
                     return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                  },
        format: 'dd/mm/yyyy'
        onSelect: function(selected,inst) {
       $("#searchtype_checkin").datepicker("option","maxDate", selected)
     }
});

Working fiddle

datepicker再次启动bootstrap

1 个答案: