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.


  <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

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 the information