Kendo UI DatePicker Does Not Set Value After Change Event Run

Question

I have two Kendo UI DatePicker objects on the page. Both of them had been set with a function called in document.ready(). After change event runs when date changed the same function that was called from document.ready() runs again. But this time first datepicker object does not set the value. I used it like below

var endPicker = $("#endDate").data("kendoDatePicker");
var beginPicker = $("#startDate").data("kendoDatePicker");
if ($("#today").is(':checked')) {
 beginPicker.value(new Date());//this one sets null not the date
 endPicker.value(new Date());
}

Something prevents setting the first datepicker's value. Change events only for validating date range and start and end datepickers call them respectively

 function startChange() {
        var endPicker = $("#endDate").data("kendoDatePicker"),
            first = this.value();

        if (first) {
            first = new Date(first);
            first.setDate(first.getDate() + 1);
            endPicker.min(first);
        }
        dateChanged();//calls ajax
    }

    function endChange() {
        var startPicker = $("#startDate").data("kendoDatePicker"),
            second = this.value();

        if (second) {
            second = new Date(second);
            second.setDate(second.getDate() - 1);
            startPicker.max(second);
        }
        dateChanged();//calls ajax
    }

Answer 1

Ah finally I found what was wrong and why first datepicker can not set today's value. It's all about second datepicker's change event. It sets it's own value -1 as the first datepicker's max value. So it should be written as second.setDate(second.getDate()); In this case they set new Date() as their new value.