This is a migrated thread and some comments may be shown as answers.

Client side validation for min and max

8 Answers 99 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 21 Feb 2018, 03:41 PM

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?

8 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 23 Feb 2018, 08:17 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 23 Feb 2018, 10:03 PM
So are you saying the issue I'm experience is a bug, and will be fixed at some point in the future?
0
Preslav
Telerik team
answered on 27 Feb 2018, 11:32 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 28 Feb 2018, 05:13 PM
This IS an issue for us, but is something we can wait to be fixed.
0
Viktor Tachev
Telerik team
answered on 27 Mar 2018, 12:24 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 03 Apr 2018, 02:43 PM

[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?

0
Preslav
Telerik team
answered on 05 Apr 2018, 09:46 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Viktor Tachev
Telerik team
answered on 11 Apr 2018, 02:06 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Date/Time Pickers
Asked by
Alex
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Alex
Top achievements
Rank 1
Preslav
Telerik team
Viktor Tachev
Telerik team
Share this question
or