첫 번째 구성 요소에 날짜 선택 도구가 표시되지 않음

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 구성 요소에서 처음 클릭 만하면 표시되지 않습니다 (단지 메서드 만 호출 됨). 두 번째 구성 요소를 다음 번 클릭하면 datepicker 만 제대로 작동합니다. 내가 여기서 누락 된 건 없니?

Answer 1

약간의 단어 1. datapicker 초기화를 캘린더 메소드 밖으로 이동하십시오. 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()가 아니기 때문에 발생하지 않습니다. 두 번째로 입력을 클릭하면 달력 메서드의 첫 번째 패스에서 설정 되었기 때문에 데이터 피커가 나타납니다.

는 대신 달력 방법을 사용하는이 작업을 수행하지 왜

: 달력 방법은의 datapicker를 초기화 처음, 실행까지 입력은 datapicker()

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