CODEWITHSUNDEEP
c#asp.net-mvc-4razorkendo-ui
DShultz
DShultz

Reputation: 4541

Kendo DatePicker Max and Min values not limiting text entry

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.

Upvotes: 3

Views: 5537

Answers (4)

Talk is Cheap Show me Code
Talk is Cheap Show me Code

Reputation: 2304

You can do one thing. Just disable the keypad from showing up if you are in kendo mobile. You can use this line inside your Onclick method of datepicker input

onclickhandler : function(event) { 
      document.activeElement.blur();
}

Upvotes: 0

GenXisT
GenXisT

Reputation: 298

It also works if you add an onkeydown call in the HtmlAttributes section

.HtmlAttributes(new { onkeydown = "javascript: return false; " })

This allows the calendar to still be clickable while disabling manual user entry.

Upvotes: 0

LunchBaron
LunchBaron

Reputation: 160

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

Upvotes: 3

Burke Holland
Burke Holland

Reputation: 2337

The Razor renders a Kendo UI DatePicker. The DatePicker does not restrict user input when keyed in.

http://demos.telerik.com/kendo-ui/web/datepicker/rangeselection.html

You can set the 'readonly' attribute which will disable user input altogether and force them to use the UI.

Upvotes: 0

Related Questions