knockout.js - 两个带 knockout 的日期选择器，一个更新另一个

Question

我附加了带有 knockout 自定义绑定(bind)处理程序的 jQuery datepicker，并且我想在更新第一个字段时将 minDate 设置为第二天之后(以防其他日期未设置为以后的日期)。

<label>Check-in:</label>
<input type="date" id="checkIn" data-bind="datepicker: checkIn, datepickerOptions: {
    minDate: 0,
    dateFormat: 'dd/mm/yy',
    firstDay: 1
    }" />
<br/>
<br/>

<label>Check-out:</label>
<input type="date" id="checkOut" data-bind="datepicker: checkOut, datepickerOptions: {
    minDate: 0,
    dateFormat: 'dd/mm/yy',
    firstDay: 1
    }" />

我已设置 fiddle for that

例如 如果 checkOut 日期选择 28/11/2012 而您 checkIn 选择 25/11/2012 则无需更改 checkOut 日期，只需将 checkOut 的 minDate 设置为 26/11/2012。

但如果您选择 29/11/2012 进行 checkIn，则 checkOut 需要更新为 30/11/2012

Answer 1

一种方法是订阅第一个日期可观察属性并使用它来设置第二个:

self.checkIn.subscribe(function(newValue) {
    $("#checkOut").datepicker("option", "minDate", self.checkIn());
});

见 here

当然，这不是最优雅的解决方案，因为它需要知道 View 的哪一部分与其他属性相关。更好的解决方案可能是创建另一个自定义绑定(bind)。

类似这样的:

ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("option", "minDate", value);
    }        
}

这样绑定(bind):

<input type="date" id="checkOut" data-bind="{datepicker: checkOut, datepickerOptions: {
minDate: 0,
dateFormat: 'dd/mm/yy',
firstDay: 1
},
minDate: checkIn}" />

见 here .