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
    }" />

我已设置fiddle for that

e.g。如果为checkOut日期选择了28/11/2012并且您选择了checkIn选择25/11/2012，则无需更改checkOut日期，只需将checkOut的minDate设置为26/11/2012。

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

Answer 1

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

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

请参阅here

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

这样的事情：

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}" />

请参阅here。

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

1 个答案: