Client side validation for min and max

[Alex]

Using the min and max values for the picker will prevent you from being able to select the dates/times via the UI, but you can still manually enter values outside of the min and max. I believe this is expected behavior, but there doesn't seem to e a way to inform the user that they just entered a datetime that is not in valid range. The onChange event does not fire, which makes sense, so there's no way for me to hook in and tell the user they just entered an invalid date.

 

My question: How can I disable dates in the UI AND still do min/max validation for the user so they know they netred a date/time out of the range and prevent a a form submission?

[Stefan]

Hello, Alex,

In this cases, we can recommend using the DateInput property of the DatePicker. This will fire the change event if a value under the min one is entered:

function onChange() {
 if(this.value() === null){
 var min = this.min()
 this.value(min)
 }
}

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/DatePickerBuilderBase#methods-DateInput(System.Boolean)

This should also work automatically one the following issue is fixed:

https://github.com/telerik/kendo-ui-core/issues/3828

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Alex]

So are you saying the issue I'm experience is a bug, and will be fixed at some point in the future?

[Preslav]

Hello Alex,

You are correct when the issue is fixed, the desired functionality will be working as expected.

In the meantime, use the workaround from my colleague's post.


Regards,
Preslav
Progress Telerik

[Alex]

This IS an issue for us, but is something we can wait to be fixed.

[Viktor Tachev]

Hi Alex,

This is a follow up for the issue in question, we are working on it right now. However, changing the behavior of the components would introduce a breaking change either in DateInput or in the  picker widgets (DatePicker, TimePicker, DateTimePicker). Introducing breaking changes is something that we strive to avoid.

With that said, a possible fix of the issue would be clearing the DateInput value when an invalid date is entered in the picker component. What do you think of such imlementation? Will it work for your scenario?

Regards,
Viktor Tachev
Progress Telerik

[Alex]

[quote]a possible fix of the issue would be clearing the DateInput value when an invalid date is entered in the picker component. What do you think of such imlementation? Will it work for your scenario?[/quote]

 

I think that's reasonable. But I think there should be some cue to the end-user as to why the data just blanked out, but maybe that would be my responsibility? If so, where can I capture the invalid date value. Will the onChange event receive the invalid date value in the event parameters? Will there be some flag indicating the date value was invalid?

[Preslav]

Hello Alex,

Thank you for your feedback. Viktor is out of the office, and I am not sure what is the correct answer to your questions. Thus, as soon as he comes back, I will let him know to update this post.


Regards,
Preslav
Progress Telerik

[Viktor Tachev]

Hi,

​The current behavior is observed because the DateInput corrects the entered value if it is out of range. However, if the user enters an invalid value the Date(Time)Picker does not accept it. What we can suggest for applying the value displayed in the DateInput to the DatePicker is the approach shown in the dojo below:

http://dojo.telerik.com/oPuKIxez/3


With that said, it is always recommended to use additional validation for the data entered by the users. This would prevent errors and can also be used to prompt the users what is not correct. The example below shows the Kendo Validator in action.

https://demos.telerik.com/kendo-ui/validator/index




Regards,
Viktor Tachev
Progress Telerik