Jquery Kendo Grid Datepicker set a date range

Question

Is there a way to make users to only select a range between two dates in a column kendo grid (kendo datepicker)?

For example) if the effective date is displaying 09/09/2017 then I would like users to select in between 09/09/2017 and today.

Here's a column that I'm currently using a Kendo DatePicker.

{ 
field: "EffectiveDate",
 headerTemplate: 'Effective Date<span style="vertical-align:middle; color:red; font-size: 12px;">*</span>',
 format: "{0:MM/dd/yyyy}",
 type: "date" 
}

Answer 1

for setup the min

 $("#datepicker").kendoDatePicker();

var datepicker = $("#datepicker").data("kendoDatePicker");

datepicker.min(new Date(2000, 0, 1));

For setup the max

$("#datepicker").kendoDatePicker();

var datepicker = $("#datepicker").data("kendoDatePicker");

datepicker.max(new Date(2100, 0, 1));

Sample code on the API documentation page https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/min

Answer 2

To achieve that, you can use a custom editor for your column:

editor: function(container, options) {
    $('<input>').appendTo(container).kendoDatePicker({
        max: (new Date()),
        min: (new Date(2017, 8, 9))
    });
}

In your case, you need to set the min property to the desired date, which will be in options.model, your row data.

Demo