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

Question

我附加了带有淘汰赛自定义绑定处理程序的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
    }" />

我为此设置了小提琴

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

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

Answer 1

One way to do it is to subscribe to the first date observable property and use that to set the second:

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

See here

Of course, this is not the most elegant solution, since it requires knowing which part of the view relates to the other property. A better solution might be to create another custom binding.

Something like this:

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

Bound like this:

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

See here.