Change kendoDatePicker value from kendoNumeric control

Question

I have been struggling with KendoUI/Knockout integration.

My requirement:

1. Have two KendoUI DatePicker elements (Start and End date). End date should be readonly and should be a calculated value
2. A KendoUI NumericTextBox element(Period) to capture month values
3. When NumericTextBox value is inserted, it should automatically add on to the month value of the End date

My Attempt(please ignore use of tables):

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(with my dysfunctional code commented out):

    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

Because you are using Knockout there is no need to manually get the values from the controls you can just use the values presented in the viewmodel to calculate the end date with:

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

Demo JSFiddle.

Anyway your original approach wouldn't work because the KO change tracking only works with observables so your original computed does not get updated when you change the inputs.

In order to also trigger the change also with the spinner buttons is not supported out of the box by KO-Kendo. However you can recreate the kendoNumericTextBox which can also listen to the spin event:

Demo JSFiddle.

Answer 2

@nemesv's solution works perfectly. If you could also spare your insight @nemesv, it would be most helpful. But I was also trying to bind to the events without "recreating the NumericTextBox", so we can reuse the same logic.

It works to some extent but as I increment the months, the years seem to be incrementing too. It seems to multiply or add to the EndDate instead of the StartDate. Or I am missing something???

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