两个淘汰赛的淘汰赛,一个更新另一个

Question

我附加了jQuery datepicker with knockout custom bindings handler,我想在更新第一个字段时将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
    }" />

我为此设置了小提琴

例如,如果选择checkOut日期为28/11/2012并且您选择了检查选择25/11/2012,则无需更改checkOut日期,只需将checkOut的minDate设置为26/11/2012.

但如果您选择29/11/2012 for checkIn,则checkOut需要更新至2012年11月30日

Answer 1

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

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

看到这里

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

像这样的东西:

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

像这样绑定:

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

看到这里.