Два датпикера с нокаутом, один обновляет другой

Я получил привязанный 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, только чтобы установить minDate checkOut до 26/11/2012.

Но если вы выберете 29/11/2012 для checkIn, тогда checkOut необходимо обновить до 30/11/2012

Ответы

Ответ 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}" />

Смотрите здесь.