3

ノックアウトカスタムバインディングハンドラーを使用してjQuerydatepickerをアタッチしました。最初のフィールドを更新して、2日後の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
    }" />

私はそのためのフィドルを設定しました

たとえば、チェックアウト日が2012年11月28日を選択し、チェックインが2012年11月25日を選択した場合、チェックアウト日を変更する必要はありません。チェックアウトのminDateを2012年11月26日に設定するだけです。

ただし、チェックインに2012年11月29日を選択した場合、チェックアウトは2012年11月30日に更新する必要があります。

4

1 に答える 1

10

これを行う1つの方法は、最初の日付の監視可能なプロパティをサブスクライブし、それを使用して2番目の日付を設定することです。

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

ここを参照してください。

于 2012-11-21T15:42:59.777 に答える