日付ピッカーが最初のコンポーネントのクリックに表示されていません

Question

私のJSPに次のコードがあり、変数をknockout jsでバインドしています。

私のjsが

calender: function() { 
    console.log("in calender"); 
    var dates = $("#from1, #to1").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onSelect: function (selectedDate) { 
     var option = this.id == "from" ? "minDate" : "maxDate", 
      instance = $(this).data("datepicker"), 
      date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
     dates.not(this).datepicker("option", option, date); 
    } 
}); 
}, 

で、JSPが

<div class="DateRange"> 
<label for="from">From</label> 
<input type="text" id="from" name="from" data-bind="click: calender, value: starDate"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to" data-bind="click: calender, value: endDate"/> 
</div> 

である私はどちらかの開始または終了終了日をクリックするとカレンダーメソッドが呼び出さ取得されますが、問題は日付ですピスカは、そのidにかかわらず、fisrtコンポーネントのクリックでは表示されません（ちょうどメソッドだけが呼び出されます）。次の2番目のコンポーネントをクリックすると、datepickerだけがうまくいきます。私はここで行方不明の何か？

Answer 1

1.データピッカーの初期化をカレンダー方式から外します。 2.適切な日付ピッカーのすなわちを表示する各フィールドのための2つの別々のメソッドを作成します。：

$("#from1, #to1").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onSelect: function (selectedDate) { 
     var option = this.id == "from" ? "minDate" : "maxDate", 
      instance = $(this).data("datepicker"), 
      date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
     dates.not(this).datepicker("option", option, date); 

     } 
    });  

    ........ 

    calenderFrom: function() { 
    $("#from1").datepicker("show"); 
    } 
    calenderTo: function() { 
    $("#to1").datepicker("show"); 
    } 

<input type="text" id="from" name="from" data-bind="click: calenderFrom, value: starDate"/> 
<input type="text" id="to" name="to" data-bind="click: calenderTo, value: endDate"/> 

UPD 私はあなたがjQueryUIの日付ピッカーを使用すると仮定します。そうであれば、実際に手動で表示する必要はありません。ちょうどそれを初期化してください

Answer 2

入力が最初にカレンダーメソッドを通過するまで入力が実際にdatapicker（）でないので、起動しません。入力を2回クリックすると、カレンダーメソッドの最初のパスで設定されたため、データピッカーが表示されます。

理由だけではなく、代わりに、カレンダー法を使用してのこれをしない：

$("#from1, #to1").datepicker({...});