Validation on DatePicker Control

20 posts, 0 answers
  1. James
    James avatar
    8 posts
    Member since:
    Jan 2013

    Posted 22 Feb 2013 Link to this post

    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.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 26 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. S2
    S2 avatar
    6 posts
    Member since:
    May 2012

    Posted 27 Feb 2013 Link to this post

    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!
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 28 Feb 2013 Link to this post

    Hello David,

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

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. S2
    S2 avatar
    6 posts
    Member since:
    May 2012

    Posted 28 Feb 2013 Link to this post

    Thanks, Iliana; I will give that a try.
    Do you know if it will handle the time portion as well?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 04 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. S2
    S2 avatar
    6 posts
    Member since:
    May 2012

    Posted 04 Mar 2013 Link to this post

    That seems to work so far, thanks!
  9. Dan
    Dan avatar
    6 posts
    Member since:
    Apr 2013

    Posted 07 Jun 2013 Link to this post

    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.
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 11 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Dan
    Dan avatar
    6 posts
    Member since:
    Apr 2013

    Posted 11 Jun 2013 Link to this post

    Thanks, but that didn't do it. This JSBin has the latest Kendo and jQuery, but I still see the issue.
  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 13 Jun 2013 Link to this post

    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.parseDateFor your convenience I updated the jsBin example.  

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Dan
    Dan avatar
    6 posts
    Member since:
    Apr 2013

    Posted 13 Jun 2013 Link to this post

    Beautiful. Thank you!
  14. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 07 Nov 2014 in reply to James Link to this post

    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; }

  15. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 11 Feb Link to this post

    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

  16. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 12 Feb in reply to King Wilder Link to this post

    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.}

  17. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 07 Oct Link to this post

    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...

  18. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 11 Oct Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  19. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 11 Oct in reply to Dimiter Topalov Link to this post

    @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.

  20. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 11 Oct in reply to Steve Link to this post

    @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

  21. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 13 Oct Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready