I want to set the end date to be after start date in Kendo grid using Kendo DatePicker

Question

    function dateEditor(container, options) {

        $("<input data-bind='value:" + options.field + "' />")
               .appendTo(container)
               .kendoDatePicker({
                   format: "dd MMMM yyyy",
                   min:new Date(2000,0,1),
                   change: function (e) {
                       $('div[data-container-for=' + options.field + ']').find('div[class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error"]').remove();

                   }
               });

    }

Both the startdate and enddate using the same function This the Kendo code and here comes the grid representation Can anyone help me with the solution for this?

  {
                field: "StartDate",
                title: "Subsidy starts",
                hidden: true,
                type: "date",
                format: "{0:dd MMMM yyyy}",
                editor: dateEditor,

            },
            {
                field: "EndDate",
                title: "Subsidy ends",
                type: "date",
                format: "{0:dd MMMM yyyy}",

                editor: dateEditor,

            },

score 0 · Answer 1 · answered May 21 '15 at 05:33

You can do like this

  function startChange() {
    var startPicker = $("#datepickerStart").getKendoDatePicker();
    var endPicker = $("#datepickerEnd").getKendoDatePicker();
                var startDate = startPicker.value(),
                endDate = endPicker.value();

                if (startDate) {

                    startDate = new Date(startDate);
                    startDate.setDate(startDate.getDate());
                    endPicker.min(startDate);
                } else if (endDate) {
                    startPicker.max(new Date(endDate));
                } else {
                    endDate = new Date();
                    startPicker.max(endDate);
                    endPicker.min(endDate);
                }

            }
$("#datepickerStart").kendoDatePicker({
                change: startChange
            }).data("kendoDatePicker"); 
    });

  function dateEditor(container, options) {

$("<input data-bind='value:" + options.field + "' />")
       .appendTo(container)
       .kendoDatePicker({
           format: "dd MMMM yyyy",
           min:new Date(2000,0,1)

});
}

Refer the working demo here

score 0 · Answer 2 · answered May 22 '15 at 03:46

 $("<input data-bind='value:" + options.field + "' />")

               .appendTo(container)
               .kendoDatePicker({
                   format: "dd MMMM yyyy",
                 value: new Date(),
                   change: function (e) {
                       $('div[data-container-for=' + options.field + ']').find('div[class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error"]').remove();


                       var Start = $("input[data-bind='value:StartDate']").data("kendoDatePicker").value();
                       var end = $("input[data-bind='value:EndDate']").data("kendoDatePicker").value();
                       $("input[data-bind='value:EndDate']").data("kendoDatePicker").min(Start);
                       if(Start>end)

                           $("input[data-bind='value:EndDate']").data("kendoDatePicker").value(Start);


                   }
               });
        }

    function endDateEditor(container, options) {
        $("<input data-bind='value:" + options.field + "' />")
               .appendTo(container)
               .kendoDatePicker({
                   format: "dd MMMM yyyy",

                   change: function (e) {
                       $('div[data-container-for=' + options.field + ']').find('div[class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error"]').remove();

                   }
               });

    }

where i used the new Date() to get the value

I want to set the end date to be after start date in Kendo grid using Kendo DatePicker

2 Answers2