Edit this page

Change DatePicker Value from Another DatePicker

The following example demonstrates how to change a DatePicker value based on the modified value of another DatePicker by using the inline edit mode of the Grid.

When the user selects a date from the first DatePicker, the following date is programmatically set to the second DatePicker.

Example

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

  <script>

    $("#grid").kendoGrid({  
      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());               
        nextDay.setDate(nextDay.getDate()+1);      
        dp2.value(nextDay);
        dp2.trigger("change");
      })
    }
  </script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy