검도에서 kendoDatePicker 값을 변경합니다 숫자 컨트롤

Question

나는 KendoUI/Knockout 통합에 어려움을 겪고 있습니다.

내 요구 사항 :

1. 두 KendoUI DatePicker에서 요소 (시작 및 종료 날짜)가 있습니다. 종료 날짜는 읽기 전용이어야하며 달 NumericTextBox 값이 삽입되면
2. , 그것은 자동으로 종료 날짜의 월 값에 추가해야합니다 값 캡처하는 계산 된 값
3. KendoUI NumericTextBox 요소 (기간)해야

(테이블의 사용을 무시하세요)

내 시도 :

HTML 내 dysfunc와

<table> 
    <tr> 
     <td>Start Date:</td> 
     <td> 
      <input name="StartDate" id="StartDate" data-bind="kendoDatePicker: eventStartDate" /> 
     </td> 
    </tr> 
    <tr> 
     <td>End Date:</td> 
     <td> 
      <input name="EndDate" id="EndDate" data-bind="kendoDatePicker: computedEndDate" /> 
     </td> 
    </tr> 
    <tr> 
     <td>Event Period(months) :</td> 
     <td> 
      <input id="EventtPeriod" name="EventPeriod" data-bind="kendoNumericTextBox: eventPeriod" /> 
     </td> 
    </tr> 
</table> 

자바 스크립트/뷰 모델 (적인 코드) 주석 :

var ViewModel = function() { 
     var now = new Date(); 

     this.eventStartDate = ko.observable(now); 
     this.eventPeriod = ko.observable(); 
     this.computedEndDate = ko.observable(); 

     /* //DOES NOT WORK 
     this.computedEndDate = ko.computed(function() { 
      var start = $('#StartDate').data('kendoDatePicker').value(); 
      var period = $('#EndDate').data('kendoNumericTextBox').value() 
      var end = $('#EndDate').data('kendoDatePicker') 
      end.value.setMonth(start.getMonth() + period); 
      //var eventPe 
      //return end; 
     }); 
     */ 
    }; 

var vm = new ViewModel(); 
ko.applyBindings(vm); 

JSFiddle을 : http://jsfiddle.net/user919426/JkgY6/4/

Answer 1

당신이 넉 아웃을 수동으로 만 계산하는 뷰 모델에서 제시 한 값을 사용할 수있는 컨트롤에서 값을 얻을 필요가 없습니다 사용하고 있기 때문에 종료일 :

this.computedEndDate = ko.computed(function() { 
    var period = this.eventPeriod(); 
    var newMonth = this.eventStartDate().getMonth() + period; 
    var endDate = new Date(this.eventStartDate()); 
    endDate.setMonth(newMonth); 
    return endDate; 
}, this); 

데모 JSFiddle

어쨌든 KO 변경 내용 추적은 관측 가능 기능과 만 작동하므로 입력을 변경하면 원본 계산 결과가 업데이트되지 않으므로 원래 접근 방식이 작동하지 않습니다.

KO-Kendo는 스피너 버튼을 사용하여 변경 사항을 트리거하기 위해 상자를 지원하지 않습니다. 그러나 당신은 또한 spin 이벤트를 수신 할 수있는 kendoNumericTextBox을 다시 만들 수 있습니다 : nemesv의 솔루션 @

데모 JSFiddle.

Answer 2

완벽하게 작동한다. @nemesv에 대한 통찰력을 확보 할 수 있다면, 가장 도움이 될 것입니다. 하지만 "NumericTextBox를 다시 만들지 않고"이벤트에 바인딩하려고 했으므로 같은 논리를 다시 사용할 수 있습니다.

그것은 어느 정도 효과가 있지만 월을 증가 시킴에 따라 년도 증가하는 것처럼 보입니다. StartDate 대신 EndDate를 곱하거나 추가하는 것으로 보입니다. 또는 나는 무언가를 놓치고있다 ???

$('#EventtPeriod').ready(function() { 
var eventPeriod = $("#EventPeriod").data("kendoNumericTextBox"); 

    eventPeriod.bind("spin", function() { 

    var startControl = $('#StartDate').data('kendoDatePicker'); 
    //var endControl = $('#EndDate').data('kendoDatePicker');  
    var value = this.value(); 
    var startDate = startControl.value(); 

    startDate.setMonth(startDate.getMonth() + value); 

    $('#EndDate').data('kendoDatePicker').value(startDate); 

}); 

}); 

JSFiddle http://jsfiddle.net/user919426/AtJCL/4/