Question

我一直在努力与KendoUI / Knockout集成。

我的要求：

有两个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 / ViewModel（我的功能失调的代码被注释掉了）：

    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

因为您使用的是Knockout，所以无需手动从控件中获取值，您只需使用viewmodel中显示的值来计算结束日期：

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更改跟踪仅适用于observable，因此当您更改输入时，原始计算不会更新。

KO-Kendo不支持使用微调器按钮同时触发更改。但是，您可以重新创建kendoNumericTextBox，这也可以收听spin事件：

演示JSFiddle.

Answer 2

@ nemesv的解决方案非常有效。如果您还可以放心使用@nemesv，那将是最有帮助的。但是我也试图在没有＆＃34;重新创建NumericTextBox＆＃34;的情况下绑定到事件，因此我们可以重用相同的逻辑。

它在某种程度上起作用，但随着我增加几个月，这些年似乎也在增加。它似乎乘以或添加到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/

从kendo数字控件更改kendo DatePicker值

2 个答案: