Kendo DatePicker Max and Min values not limiting text entry

[Tom]

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.

[Dimiter Madjarov]

Hi Tom,


I am not sure that I correctly understand the issue. When an invalid input is entered manually from the user, the invalid date stays in the input field, but the actual value of the DatePicker is set to null. Are you looking for some different behavior than the described one?

 

Regards,
Dimiter Madjarov
Telerik

[Bobby]

[quote]Dimiter Madjarov said:
When an invalid input is entered manually from the user, the invalid date stays in the input field, but the actual value of the DatePicker is set to null. Are you looking for some different behavior than the described one?

[/quote]

This does not seem to be true.

I have a view model similar to:

public class MyViewModel
{
     public DateTime? MyDate { get; set; }
}

with the property being rendered on the view like:

@(Html.Kendo().DatePickerFor(model => model.MyDate).Min(DateTime.Now.AddDays(1)))

(note that the date of this post is 4/7/2014)

If I enter "4/1/2014" into the textbox that the DatePickerFor creates and then post the form back to my controller action; the bad "4/1/2014" date is populating the MyDate property rather than MyDate being set to null.

[Dimiter Madjarov]

Hi Bobby,

As far as I understand the current scenario, a form is used to submit the value. If this is the case, then the described behavior is expected, because the actual value of the underlying input is submitted and not the widget value. As stated previously only the value of the widget becomes null, while the underlying input contains the manually entered invalid value. I hope this information clarifies the case.

As for the exact scenario, you could add client validation in order to ensure the correct state of the model value. The following tutorial about Adding validation might be helpful.

Regards,
Dimiter Madjarov
Telerik

 

 

[Bobby]

[quote]Dimiter Madjarov said:Hi Bobby,

As far as I understand the current scenario, a form is used to submit the value. If this is the case, then the described behavior is expected, because the actual value of the underlying input is submitted and not the widget value. As stated previously only the value of the widget becomes null, while the underlying input contains the manually entered invalid value. I hope this information clarifies the case.
[/quote]

If the DatePicker widget is known to have the more correct value, why would it not be submitted rather than the less correct textbox?
Why is the textbox value not kept in sync with the widget value, especially since you are already updating the widget to null for bad values?
Is there a way to use the DatePicker widget with a read-only <span> rather than the not always correct textbox? 

[quote]Dimiter Madjarov said:
As for the exact scenario, you could add client validation in order to ensure the correct state of the model value. The following tutorial about Adding validation might be helpful.
[/quote]

Do you mean the part of the article that states:
"You will need to disable  jQuery date validation to use the  Range attribute with DateTime. It's generally not a good practice to compile hard dates in  your models, so using the Range attribute and DateTime is discouraged."

In addition, I can't seem to find the MVC Helper that allows me to build Validator widget objects.

[Dimiter Madjarov]

Hello Bobby,

I'll go straight to the questions:

If the DatePicker widget is known to have the more correct value, why would it not be submitted rather than the less correct textbox?
Basically this is not possible, because the HTML form is not aware that the widget actually exists. It could only access the values of the native elements and submit them. This is why it is up to the developer to validate the state of the fields.

Why is the textbox value not kept in sync with the widget value, especially since you are already updating the widget to null for bad values?
This behavior is by design and the goal is to improve user experience. When the client validator notifies the user that the entered value is not valid, one will be able to observe the incorrect value as it is still in the input element.

Is there a way to use the DatePicker widget with a read-only <span> rather than the not always correct textbox?
Yes, this could be achieved by adding the readonly property to the input, after the widget is initialized. This way only the input element will be readonly. If the property is set during initialization e.g. via the HtmlAttributes method, the whole widget will be considered as readonly (including the dropdown).
E.g.

$(function () {
    $("#MyDate").prop("readonly", "readonly");
});

Regarding the article, that I provided in the previous post, it was intended to demonstrate a general approach of adding client validation. The snippet, that you are referring to, emphasizes the fact that the Range attribute is more suitable for number validation. Values of any other type are passed as strings and then parsed to the specific type. Furthermore the attribute accepts only constants as values for the min and max.

As for the last question, there is no MVC Wrapper for the Kendo UI Validator. You could take a look at the following documentation page, which demonstrates how to use the Validator with data annotations. It also contains an example, demonstrating how to implement a custom attribute, which is a possible approach in the current scenario.

Regards,
Dimiter Madjarov
Telerik

 

 

[Jonathan]

I discovered the same problem while testing an MVC application. I restricted a date picker's MAX to today's date. Our tester typed "1/1/3000" and when the form was submitted, I traced my server-side controller code and saw that it received this crazy value, not a null. The date picker's calendar restricted the user from choosing a future date, however.

[Dimiter Madjarov]

Hello Jonathan,

The reason for this behavior is explained in the previous posts.

Regards,
Dimiter Madjarov
Telerik

 

 

[Jonathan]

The thing that gave me pause was that I use a Kendo Numeric Text Box on the same form. When I set its Max property and tested, the user could not enter a value greater than that. Dynamically, the user's input was replaced by the Max value. I guess I expected the date control to do the same thing.

[Dimiter Madjarov]

Hello Jonathan,

This observation is indeed correct and the behavior is by design, because the widgets are conceptually different. The numeric input only allows numbers and decimal separators, and the user's input could easily be manipulated according to the widget configuration. The date picker element allows free user input using different characters and date formats, which means that multiple regular expressions will be required to handle the scenario. Nevertheless if you consider that it is a must, you could post it as a suggestion in our User Voice portal.

Regards,
Dimiter Madjarov
Telerik