How Do I Raise the Change Event in the KendoUI DatePicker?

Question

I'm trying to set the value of my DatePicker using the code below and expecting the "Change" event to be raise but it doesn't.

var datePicker = $("#datePicker").data("kendoDatePicker");
var previousDate = new Date(datePicker.value());
previousDate.setDate(previousDate.getDate() - 1);
$("#displayDate").text(kendo.toString(new Date(previousDate), 'D'));
datePicker.value(previousDate);

Change the date value through the user interface does raise the "Change" event as expected however.

Answer 1

Please try with the below code snippet.

HTML

<input id="datepicker" />
<input type="button" value="set date" onclick="setdateInDP()">

JS

<script type="text/javascript">
$(document).ready(function () {
    function onChange() {
        alert("Change :: " + kendo.toString(this.value(), 'd'));
    }

    $("#datepicker").kendoDatePicker({
        change: onChange
    });
});

function setdateInDP() {
    var datePicker = $("#datepicker").data("kendoDatePicker");
    var previousDate = new Date(datePicker.value());
    previousDate.setDate(previousDate.getDate() - 1);
    datePicker.value(previousDate);
    $("#datepicker").data("kendoDatePicker").trigger("change");
}