New to Kendo UI for jQuery? Download free 30-day trial

Change DatePicker Value from Another DatePicker in the Grid


Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript


How can I change the value of one editor based on the value of another editor when working with the Kendo UI Grid?


The following example demonstrates how to change a Kendo UI DatePicker value based on the modified value of another DatePicker by using the inline edit mode of the Kendo UI Grid. When the user selects a date from the first DatePicker, the following date is programmatically set to the second DatePicker.

  <div id="grid"></div>


      dataSource: {
        data: [
          { Date1: '2017-8-5', Date2: '2017-8-6' }
        schema: {
          model: {
            fields: {
              Date1: { type: "date" },
              Date2: { type: "date" }
      columns: [{
        field: "Date1",
        format: "{0: yyyy-MM-dd}"
        field: "Date2",
        title: "Date1 + 1 day",
        format: "{0: yyyy-MM-dd}",
        command: ["edit", "destroy"],
        title: "&nbsp;",
        width: "250px"
      editable: "inline",
      edit: onEdit
    function onEdit(e){
      var dp1 = e.container.find("[name='Date1']").data("kendoDatePicker");
      var dp2 = e.container.find("[name='Date2']").data("kendoDatePicker");

      dp1.bind("change", function(e){
        var nextDay = new Date(dp1.value());               

See Also

In this article