I have a Kendo DatePicker control on a page in an MVC app:
@(Html.Kendo().DatePicker()
.Name("PlanStartDate")
.HtmlAttributes(new { @class = "reportParam" })
.Value(Model.MinDate)
.Min(Model.MinDate.ToShortDateString())
.Max(Model.MaxDate.ToShortDateString())
)
Note that I am setting .Min and .Max values. These min and max values correctly limit the calendar drop down to the proper date range: "9/10/2013" to "9/10/2014".
Unfortunately, the user can still enter dates outside of the Min and Max dates by using the input textbox instead of the calendar dropdown.
I'm aware that I can add JavaScript to create rules and messages on the control's kendoValidator object, but I'm looking for the simplest, hopefully Razor-only solution to enforce the max and min range on the datepicker, no matter how the user enters the date.
Unfortunately there still isn't anything to allow this to be set in the Razor. The only solution i have found is to set the input to readonly after the widged has been initialized. This ensures the user cannot manually enter any dates and that they use the picker controls. I tried setting the attribute in the razor syntax by adding to the HtmlAttributes but this has the same result as setting readonly on the widget i.e. the input and picker are disabled.
I had originally decided to just add validation to the changed event so that the ability to manually enter dates was not lost but this does not fire when dates are manually entered(!)
$(function() {
$("#startDate").prop("readonly", "readonly");
});
Solution found here: http://www.telerik.com/forums/kendo-datepicker-max-and-min-values-not-limiting-text-entry#Mr13l7RaiUeA8Nm9cVo7hQ
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With