16

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.

Jayesh Goyani
  • 11,008
  • 11
  • 30
  • 50
JeeShen Lee
  • 3,476
  • 5
  • 39
  • 59

1 Answers1

17

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

Jayesh Goyani
  • 11,008
  • 11
  • 30
  • 50
  • 1
    The problem is that it won't trigger change on the input as it normally do when you select a date with the picker. This gets done in the _change() function of datepicker... – Yepeekai Jul 23 '19 at 20:47