Datepicker in MVVM scenario doesnt support validation needs

4 posts, 0 answers
  1. Shaun
    Shaun avatar
    16 posts
    Member since:
    Jul 2012

    Posted 04 Feb 2014 Link to this post


    We are having difficulty getting the kendoui datepicker working under what we consider to be some fairly common use cases.   

    Example 1:

    Easily visible via the sample:

    Consider a requirement where this field is optional, but if filled in must parse out and be a legitimate date.   Currently if I enter "asdfasdf" or even something as innocent as "25/5/2012" (consider a non-us user who is used to dd/mm/yyyy) then the changed event is never fired.   I thus have no opportunity to warn the user that the date they have entered is invalid.

    Example 2:

    Let's say I set a maximum date of todays date on the control.   Now when I click the calendar, it properly disallows selection of a future date.   However, what I can do is go in and type in any date I want.   If a date in the future is inputted, the control determines null as the value and again, since the initial value was null as well the change event is never raised, and there is no way to provide UI validation in an MVVM scenario.

    Desired behavior
    The easiest change here probably would be to simply give us an option to have the textbox get cleared out when the control loses focus if the date is null that way at least what the user sees in the control will match what the control is reporting as its' value.

    A good example of this is the multiselect box.  If you type gyberish into it and tab out, it wipes out the invalid value.  Why does the datepicker need to retain its invalid data?

    Otherwise, we need some way to be notified via event not only when the underlying date value has changed, but also when the text changes if we are to jump through these hoops ourselves (manually parse the text according to configured formats, clear out the value if needed, etc).

  2. Shaun
    Shaun avatar
    16 posts
    Member since:
    Jul 2012

    Posted 04 Feb 2014 in reply to Shaun Link to this post

    Hmm, edit post button?   Anywho...

    A better alternative would be for the widget to display some kind of 'invalid state' warning or chrome to let the user know the input in the control has not been translated into a valid date.    This is how the telerik radcontrol datepicker worked.
  3. Alexander Popov
    Alexander Popov avatar
    1411 posts

    Posted 06 Feb 2014 Link to this post


    In the current scenario I would recommend using a Kendo UI Validator to validate the widget and display an error message if necessary. Here is a small example that illustrates how this behavior could be implemented.

    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 07 Nov 2014 in reply to Shaun 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:

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

Back to Top