Validation on DatePicker Control

[James]

I have been through all your documentation and there is not a single informative section on how to do this properly.

The question I have is this - how do I prevent somebody from entering any old rubbish in a datepicker field?  I can handle the case where the field is left empty as I can set the required attribute.

But if I enter some random text in the field it validates when it shouldn't.  I notice that when I look at this control in Firebug its input type is "text" - surely this can';t be right?  Why isn't input type = "date" then all the validation would be handled automatically surely?

I really can't believe that I have to set a pattern and validate against that?  I was doing this sort of thing 15 years ago.

Not impressed.

[Iliana Dyankova]

Hello James,

In order to achieve this you should use the Kendo UI Validator widget and set custom validation rules to validate the input. For your convenience here is a jsBin example which demonstrates a possible implementation.

Regards,
Iliana Nikolova
the Telerik team

[S2]

This doesn't seem to work with all date/time formats. For example, if

.kendoDateTimePicker({

     format: 'dd.MM.yyyy HH:mm',

     timeFormat: 'HH:mm'

})

the value will not validate (at least using the founction in the jsBin example). It seems that reliance on Date.Parse is sporadic depending on browser, format, etc.

Is there another (better) solution?

Thanks!

[Iliana Dyankova]

Hello David,

As another option I can suggest using kendo.parseDate to parse the date.

Kind regards,
Iliana Nikolova
the Telerik team

[S2]

Thanks, Iliana; I will give that a try.
Do you know if it will handle the time portion as well?

[Iliana Dyankova]

Hi David,

By design kendo.parseDate() has a predefined list with formats to parse and if your date is in format contained in such list it should be appropriately converted.

Regards,
Iliana Nikolova
the Telerik team

[S2]

That seems to work so far, thanks!

[Dan]

The JSBin example is pretty buggy. Type "1//" and it validates as a proper date. So does "1/1/1" and a bunch of other similar strings.

[Iliana Dyankova]

Hello Dan, 

I believe the issue is caused by outdated version of Kendo UI - please upgrade to the latest official version of the framework (v2013.1.514) and let me know if you still observe any problems.
 
Regards,
Iliana Nikolova
Telerik

[Dan]

Thanks, but that didn't do it. This JSBin has the latest Kendo and jQuery, but I still see the issue.

[Iliana Dyankova]

Hello Dan, 

I apologize for the overlook. You are using Date.parse - this will parse the "1//" and "1/1/1" strings as valid dates. In order to validate the aforementioned strings you could use kendo.parseDate. For your convenience I updated the jsBin example.  

Regards,
Iliana Nikolova
Telerik

[Dan]

Beautiful. Thank you!

[King Wilder]

I found a behavior in this jsBin that I'm also getting in my production application.  

1. Validation - when the widget shows a validation message, and you use the calendar to set a correct date, the validation message does not go away.  The only way to make it disappear is to set focus in the input, and then Tab out.

Is there a way to make this validation message disappear when a valid date is set?

Thanks,

King Wilder

[Matt]

I went down that route as well (using Telerik's validation) and ended up taking a different path entirely.  Instead of using Telerik's validation, I rolled my own and call it manually from within the DatePicker.Change() event.  This captures both dates entered via the dropdown as well as when users input dates (even if it's not a date, such as 12/##$DKasdr/2016).  It's pretty simple and gets around the shortcoming of no validation being executed when a user keys in the data manually:

01.$('#startPicker').kendoDatePicker({
02.    value:new Date(),
03.    change: startDateChange,
04.    ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
05.});
06.
07./* the validation function */
08.
09.function startDateChange() {
10.    if (startPicker.value() == null) {
11.        var errorMessage = SomeResourceStringErrorMessage;
12.        buildPopupDanger(errorMessage.replace("{0}", startPicker.options.format));
13.        setCurrentDateTime(startPicker);
14.    }
15.}
16.
17./* common message function */
18.function buildPopupDanger(message) {
19.    if (!message) {
20.        return;
21.    }
22.    var popupHTML = $('<div class="alert alert-danger status-message" aria-live="assertive" style="display: none;">');
23.    // a close button
24.    var close = $('<button type="button" class="close" data-dismiss="alert">×</button>');
25.    popupHTML.append(close); // adding the close button to the message
26.    popupHTML.append(message); // adding the error response to the message
27.    console.log(message);
28.    // add the message element to the body, fadein, wait 5 secs, fadeout
29.    popupHTML.appendTo($('body')).fadeIn(300).delay(5000).fadeOut(500);
30.}

[sitefinitysteve]

Who wants to use a datepicker that accepts freeform text and we have to manually validate every SINGLE time, eugh :/

This many years on and it's still a thing, I feel like kendo keeps putting out new widgets and supporting new frameworks, but we never get the basics like this giant hole covered.

This would take someone there what, couple hours to implement?  Even if it's just an optional property to avoid regressions...

[Dimiter Topalov]

Hello Steve,

You can find the reasons behind the design decision to allow free text in the DatePicker input in the following section of our documentation:

http://docs.telerik.com/kendo-ui/controls/editors/datepicker/overview#validation

A possible workaround is provided in the following how-to article:

http://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/date-masking-using-maskedtextbox

Of course, you can always submit a feature request to our UserVoice portal (or vote for previously submitted one):

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/6172023-disallow-invalid-or-out-of-range-entries-into-date

It is closely monitored, and the most popular ideas are considered for a future release of Kendo UI. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

[sitefinitysteve]

@Dimiter What about a PR to implement it, everyone else does something like it but us http://api.jqueryui.com/datepicker/#option-constrainInput

On a basic level, it's a date picker, I only want dates to be entered.  

 

Or fire the change event all the time so the functionality could easily be handled by us.  That for me is the core stumbling block, the content has changed, but no event fires so I have to handle both onChanged, AND a custom onBlur for every datepicker on the site.

[sitefinitysteve]

@Dimiter

You know what!?  I mean it kinda does what I want on the demo page right now....KINDA

http://screencast.com/t/kwwlCkAb

The problem is the "change" event only fires the one time (properly returning null, which is what I would want to act on anyway) then just stops.

This has to be a bug right...??  Solves the entire issue

[Georgi Krustev]

Hello Steve,

From widget's perspective, the change event should be raised only when the value has changed. Because Date/Time pickers work JavaScript Date instances, the selected value could be either a Date or null. Once an invalid value is entered, the widget value becomes null. If another invalid text is typed, the value is still null and change event won't raise (there is no change). That being said, the widget's change behavior is intended and cannot be classified as bug.

The best way to handle such invalid text is to use a regular UI Validator, like Kendo UI Validator. It will notify the user that the value is not valid and if message is clear enough why it's not valid. This behavior is visible in the DateTimePicker how-to demo:

http://docs.telerik.com/kendo-ui/controls/editors/datetimepicker/how-to/custom-date-validation

No matter how many times an invalid value is typed, the validation message will stay until a valid is typed. I believe this is the best way to notify the user for the form requirements without overriding his/her input.

If you would like to implement jQuery's "constrain input" functionality, then you can easily wire all inputs on the page and reset their value once an invalid value is typed. I must admit that validator is still required in this case:

http://dojo.telerik.com/aLuGE

We will consider this approach whether we decide to schedule the UserVoice suggestion for further research. For now I would suggest you use either the approach given in the last Dojo demo or using a proper client side validation.

Regards,
Georgi Krustev
Telerik by Progress

 

 

[Atlas]

I have been pretty disgusted with the validation on the kendo datepicker. What good is validation if it doesn't work regardless of the way the data is input. The validation works great if you use the calendar icon to pick your date, but provides no validation if you hand type in a value.
I have been complaining about this for some time, and the solution I got from Telerik was a cluster. I was having to use a lot of extra code to make it work.
Well I finally got around to investigating custom code attributes, both server side and client side, and discovered that it is quite easy to add a custom code attribute that works on both the client and the server side. You have to create a class that handles both scenarios, and you have to write some custom javascript, but once you get the hang of it, it's really easy.
We have requirements on several of our date values that they are on or before today or on or after today, so I created two attributes:
1) DateTimeMaxNowAttribute
2) DateTimeMinNowAttribute
I will attach the files for all of this. One of the namespaces you will need is the one that supports: ModelClientValidationRule apparently, from what I am reading this used to be in a different namespace, but I you are using MVC 4 or later, this rule exists in the System.Web.WebPages namespace.
use the code  in the attached files and simply decorate your property like so:

        [DateTimeMaxNow]
        [DisplayName("Estoppel Request Date")]
        [DisplayFormat(DataFormatString = "{0:d}")]
        public DateTime? EstoppelRequestDate { get; set; }