Set minDate and maxDate on DatePicker

[Hector Rodriguez]

Is it possible to set the minDate and maxDate on a DatePicker as to disable the selection of dates outside of this range?

[Sebastien]

Hi Hector,

Yes, according to jQuery's DatePicker page:
http://jqueryui.com/datepicker/#min-max

        Options options = new Options();
        options.set("minDate", -20);
        options.set("maxDate", Options.asString("+1M +10D"));

        form.add(new DatePicker("datepicker", options));

Best regards,
Sebastien.

[Hector Rodriguez]

Thanks for your help, and your solution did work for Jquery UI but doesn't seem to work for the Kendo UI which I am using (Sorry, didnt's see that there was a difference before asking). Do you have any recommendations? I've individually tried:

 

options.set("min", 0);

options.set("min", Options.asDate(new Date());

options.set("min", Options.asString(new Date());

options.set("min", Options.asString("2013-05-21"));

options.set("min", Options.asString("new Date(2013, 05, 21));

 

Thank you.

[Sebastien]

Hi Hector,

The correct configuration for the kendo ui's date-picker is:

        Options options = new Options();

        options.set("min", "new Date(2013, 3, 15)"); // 15 apr (month-1!)
        options.set("max", "new Date(2013, 5, 15)"); // 15 jun

        final DatePicker datepicker = new DatePicker("datepicker", Model.of(new Date()), options);
        form.add(datepicker);

FYI, Options.asString() is designed to convert a String (java) to its javascript representation (by enclosing it into single quotes).
What you need here is to pass an javascript object, not a javascript string, that why you need to simply write "new Date(2013, 3, 15)".
The JSON options will look like {"min": new Date(2013, 3, 15), "max": new Date(2013, 5, 15)}

(for reference)
http://docs.kendoui.com/api/web/datepicker#configuration-dates

Hope this helps,
Sebastien

[Hector Rodriguez]

Works perfectly,

 

Thank you!