從kendoNumeric控件更改kendoDatePicker值

我一直在努力與KendoUI/Knockout集成。從kendoNumeric控件更改kendoDatePicker值

我的要求：

有兩臺KendoUI DatePicker的元素（開始和結束日期）。結束日期應該是隻讀的，應該是一個計算值
甲KendoUI NumericTextBox元件（期間）來捕獲月份值
當插入NumericTextBox值時，它應自動上添加到結束日期的月份值

我嘗試（請忽略使用表）：

HTML

<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>

的JavaScript /視圖模型（我dysfunc周志武代碼註釋掉）：

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/

來源

2014-03-19 user919426

由於您使用的淘汰賽也沒有必要從你可以只使用在視圖模型給出的值來計算控制以手動獲取值結束日期爲：

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更改跟蹤僅適用於observables，因此當您更改輸入時原始計算不會更新。

爲了也觸發更改也與旋轉按鈕不支持開箱即用KO劍道。然而，你可以重新創建kendoNumericTextBox也可以聽spin事件：

演示JSFiddle.

來源

2014-03-19 10:05:00 nemesv

感謝@nemesv。 Upvoted！這與我感興趣的答案非常接近。如何在點擊時更新實時？不是在焦點改變時？ – user919426

KO-Kendo不支持此功能，但是您可以「重新創建」也在旋轉事件中訂閱的「kendoNumericTextBox」：http://jsfiddle.net/m3SEF/ – nemesv

@nenesv請添加作爲回答，因此我將其標記爲一個。如果您有分支機構，請在下面查看我的另一個備選方案......這不涉及重新創建。 – user919426

@ nemesv的解決方案完美的作品。如果你還可以留下你的洞見@nemesv，這將是最有幫助的。但是我也試圖在沒有「重新創建NumericTextBox」的情況下綁定事件，所以我們可以重用相同的邏輯。

它在某種程度上有效，但隨着我增加月份，年份似乎也在增加。它似乎將乘法或添加到EndDate而不是StartDate。或者我失去了一些東西？

$('#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/

來源

2014-03-19 14:28:29 user919426

第一：這應該更像是另一個問題，而不是答案。第二，這仍然不是這樣做的一種訣竅...第三：你的代碼不工作，因爲'setMonth'修改了這個日期。你必須做一個'startControl.value（）'的克隆，並修改它： 'var startDate = new Date（startControl.value（））; 'http://jsfiddle.net/j3rx9/ – nemesv

我需要一些我們可以重複使用的KendoUI元素，而不需要自定義或重新創建。注意到並感謝您的更正。認爲它會幫助我或其他可能會遇到我的問題，因爲它是相關的。下次會做不同的事情。我將你的答案標記爲答案。感謝您分享您的知識！ – user919426

從kendoNumeric控件更改kendoDatePicker值

回答

相關問題