ノックアウトを使ってdatepickerの考えを別のdatepickerにバインドする

Question

私は多くの日付ピッカーを持っています。最初の日付ピッカーは区間の始まりであり、2番目の区間は終わりです。論理的には、最初の日付ピッカーがその秒以上の値を持つべきではなく、その逆も必要である。私はこのコードを書いた：

HTML：

<input type="text" class="datepicker" data-bind="datepicker: firstDate, datepickerOptions: { endDate: secondDate }" /> 
<input type="text" class="datepicker" data-bind="datepicker: secondDate, datepickerOptions: { startDate: firstDate }" /> 

そして、JS：

function model() { 
     var self = this; 

     self.firstDate = ko.observable(); 
     self.secondDate = ko.observable(); 
    } 

    ko.bindingHandlers.datepicker = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     //initialize datepicker with some optional options 
     var options = allBindingsAccessor().datepickerOptions || {}; 
     $(element).datepicker(options); 

     //when a user changes the date, update the view model 
     ko.utils.registerEventHandler(element, "changeDate", function(event) { 
     var value = valueAccessor(); 
     if (ko.isObservable(value)) { 
      value(event.date); 
     } 
     }); 
    }, 
    update: function(element, valueAccessor) { 
     var widget = $(element).data("datepicker"); 
     //when the view model is updated, update the widget 
     if (widget) { 
     widget.date = ko.utils.unwrapObservable(valueAccessor()); 
     if (widget.date) { 
      widget.setValue(); 
     } 
     } 
    } 

    }; 

    ko.applyBindings(new model()); 

    $('body').on('focus', ".datepicker", function() { 
    $(this).datepicker({ 
     format: 'dd.mm.yyyy', 
     language: 'ru', 
     forceParse: true, 
     todayBtn: true, 
     clearBtn: true, 
     autoclose: true 
    }); 
    }); 

値がバインドされますされているが、MinDateプロパティは、日付の選択に更新されていません。誰かが私の間違いを指摘できますか？

ここにはbroken JsFiddleとworking oneがあります。だからすぐに私のコードにdatepickerOptionsを追加すると、壊れてしまいます。あなたは何ができるか

Answer 1

あなたはdatepickerにko.observableオプションを与えています。 datepickerはこれらを処理する方法を自動的には知りません。

updateメソッドで観測可能なオプションを処理する必要があります。たとえば：

var options = allBindingsAccessor().datepickerOptions || {}; 

    // Unwrap observable dates 
    Object.keys(options).forEach(function(key) { 
    options[key] = ko.unwrap(options[key]); 
    }); 

    var widget = $(element).data("datepicker"); 
    if (options.startDate) widget.setStartDate(options.startDate); 
    if (options.endDate) widget.setEndDate(options.endDate); 

ここで更新フィドルです：https://jsfiddle.net/4ebexf44/

Answer 2

は、すべての変更に（現在の要素の）現在の日付に次日付ピッカーのsetStartDate機能を使用している：ここでは

update: function(element, valueAccessor) { 
    $(element) 
     .next('input.datepicker') 
     .datepicker('setStartDate', $(element).datepicker('getDate')); 
} 

は、主にあなたのに基づいて作業jsfiddle（あります仕事）：
https://jsfiddle.net/ynfoj5jz/