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

DatePicker format will not validate even

23 Answers 1954 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Jark Monster
Top achievements
Rank 1
Jark Monster asked on 27 Feb 2013, 01:54 PM
I have a DatePicker that I want the desired input to be "Sun, 3/10/13"

I've set up the DatePicker Format AND added the same format to the ParseFormats functions of "ddd, M/d/yyyy"

The strange thing is that the desired input works, but the validation fires.

For example.

I type "3/10/2013" into the field and tab to the next input.  At this point, my input changes to "Sun, 3/10/13" (which is desired), BUT I get the "Field Date must be a date" validation error message.

Do I need to define this format on the view model as well or is something else strange going on?

Here's the source and an image of the issue is attached:

@(Html.Kendo().DatePickerFor(m => m.PickupDate)
      .ParseFormats(new string[] {
           "ddd, M/d/yyyy",
           "ddd, MM/dd/yyyy",
           "ddd, M/dd/yyyy",
      })
      .Format("ddd, M/d/yyyy")
      .HtmlAttributes(new { style = "width:110px;" })
)
<span class="k-invalid-msg" data-for="PickupDate"></span>

23 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 28 Feb 2013, 01:00 PM
Hello Mark,

 
I believe that the problem is related to jquery.validate and its inability to parse date string with "MMM, dd/MM/yyyy" format. I will suggest you check this blog post for more information and an approach how to handle this limitation.

Greetings,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 26 Apr 2013, 09:54 AM

<script src=
"../../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
  
  
<script type="text/javascript">
  
    $(document).ready(function () {
  
        jQuery.validator.addMethod(
            'date',
            function (value, element, params) {
                if (this.optional(element)) {
                    return true;
                };
                var result = false;
                try
                            var date = kendo.parseDate(value, "dd.MM.yyyy");
                    result = true;
                            if(!date){
                                result = false;
                            }
                } catch (err) {
                    result = false;
                }
                return result;
            },
            ''
        );
    });
</script>
0
Michael
Top achievements
Rank 1
answered on 30 Apr 2013, 02:02 PM
I realize this seems to be a problem with jquery validation, but it gives the appearance that your DatePicker can't understand that an invalid date is not in a correct format.  Because of that, this is also your problem.  I went to that link you gave, and just thought, "You must be joking."  Manually setting up the globalization for jquery validation isn't something I thought I'd have to spend time on, but the exact steps to fix this should be well documented in your DatePicker documentation (maybe under Getting Started->Using Kendo With->Aspnet Mvc), as it is obviously something everybody that uses the DatePicker will encounter.  I've had to spend time searching around, and everybody seems to just point their finger at jquery validation.  I'd be glad to post a list of everybody asking about it, but don't want to go find them all again.  Please consider adding this info to your official documentation to save people time.  Thanks...
0
Georgi Krustev
Telerik team
answered on 02 May 2013, 07:04 AM
Hello Michael,

 
The jQuery Validate is a framework, which is not related to Kendo UI and we do not extend/change/modify. Hence, the one, which decides to use it, will need to overcome its limitations manually. Kendo Validator can be used instead of jQuery Validate.

We defintely will point in our documentation how to handle such problems related to jQuery Validate framework. 

All the best,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 02 May 2013, 07:25 PM
I appreciate the professional response, but I have to disagree with your viewpoint.  That is like saying that if the Microsoft ASP.net AJAX framework is breaking your ASP.net AJAX controls, you won't bother trying to fix the problem because it's not your framework.  The jQuery Validation framework ships as part of the default ASP.net MVC templates, so the vast majority of all your MVC customers are going to use it.  It's not built by Microsoft, if that's what you mean, but that is irrelevant.  I'm not sure why you guys bothered to build your own validation framework, but that is probably a topic for another post.
0
Atanas Korchev
Telerik team
answered on 06 May 2013, 02:13 PM
Hi Michael,

As my colleague Georgi pointed out jquery.validate can't parse the "MMM, dd/MM/yyyy" format. This means that jquery.validate will fail with certain date formats with or without using Kendo UI DatePicker. Since patching open source libraries is beyond the scope of our product we can only suggest workarounds (such as the linked blog post) or using a library which we provide support for (Kendo UI Validator). This in fact was one of the main reasons we implemented our own validation library - to provide tight integration between all parts of the framework.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 06 May 2013, 08:12 PM
My problem was slightly different than the original post, but similar.  I have resolved my issue for now.   I'd still rather see you extend the open source validation project, but I will watch yours as it progresses. Thanks for offering more information.
0
Michiel
Top achievements
Rank 1
answered on 16 May 2013, 02:16 PM
I have the same problem as Jark Monster even though I am not using his ParseFormats but a different one.

My code looks like:
<div class="control-group">
    @Html.LabelWithAsteriskFor(model => model.ValidTill)
    <div class="controls">
        @(Html.Kendo().DatePickerFor(model => model.ValidTill)
                .Name("validTill")
                .Format("dd-MM-yyyy")
                .ParseFormats(new string[] {"ddMMyyyy"}))
    </div>
</div>
When I enter the date in format ddMMyyyy (e.g. 16052013) I see it getting corrected to "16-05-2013" but the error message (validTill is not a valid date) is displayed. I can still submit the form but I would not expect the error message in this case.
0
ShareDocs
Top achievements
Rank 1
answered on 05 Aug 2013, 09:27 AM
Hi,
I have the same problem,
I don't think blaming jquery is an answer because it is like saying microsoft mvc's Dll's are a problem.
jquery becomes part of the mvc world and the mvc framework is using its abilities to allow the developer to set his mind in building apps and not doing workarounds .

I don't mind using kendo.validaor but your demos and examples are too basic and seem really hard to assemble.

hope you'll release a hotfix or some other reasonable solution 
0
Johan
Top achievements
Rank 1
answered on 14 Oct 2013, 03:45 PM
I had the same problem.

I have a DatePicker in my inline grid editing.
The following solved it (I am in South Africa that's why ZA) 
In my view I added the correct culture as below :

@using CIS.UI.MVC.Models
@using Kendo.Mvc.UI
@model ConditionModel

@{ 
Culture = "en-ZA";
}

and in my grid
columns.Bound(clause => clause.EffectiveDate).Format("{0:d}");

  "Field Date must be a date" validation error is now not popping up anymore

Regards,
Wilma
0
mohamed
Top achievements
Rank 1
answered on 09 May 2014, 06:27 PM
hi please help me please i am student 
i have a probleme with datepicher() with kendo , some time it s woking some time no my probleme exactly is that  
When I insert the date he only accepts date today, and n ' not accept another value, also if I want the date 09/05/2014 it gives me 09/05/2004, here is my code:  public Nullable<System.DateTime> DateD_envoie { get; set; }
                                         public Nullable<System.DateTime> DateReponse { get; set; }
 in my view i have this :
                   column.Bound(a => a.DateD_envoie).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date");
                   column.Bound(a => a.DateReponse).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); 
in shared/EditorTemplates/Date i have this :
@model DateTime?

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))                thank you


0
Alev
Top achievements
Rank 1
answered on 08 Aug 2014, 08:40 AM
How can I set date fromat just for the MVC kendo grid  dd/MM/yyyy  both for dispay and edit without changing the global culture of the application
0
Ruud
Top achievements
Rank 1
answered on 29 May 2015, 10:02 AM

Hi all,

Interesting topic... I am also struggling big time with this nightmare of dependent jQuery plugins, UI and Telerik controls, etc. I tried to implement the new Globalize.js plugin (which, on its turn, uses the cldr plugin for their content); I did not manage to get it to work. 

Frustrated by the lack of any proper documentation for MVC4 and client side validations with different locals (seem pretty basic if you read it like this..) I now will try to implement the Kendo validators. 

Meanwhile, if someone has some proper tutorials and or sample project for using the jQuery validation and Globalize.js plugin, please post it here.. 

Regards,

Ruud

0
Ruud
Top achievements
Rank 1
answered on 22 Jul 2015, 05:38 PM
Anyone has an update on this? I had a really ugly work around by setting the format hardcoded as part of the Kendo date picker. But it is getting embarrassing now to tell my customer it cannot be done without heavy re work.
0
Georgi Krustev
Telerik team
answered on 24 Jul 2015, 11:03 AM
Hello Ruud,

I would suggest you review our Validation help topic, which provides a detailed information how to validate model fields in the Grid and also how to troubleshoot / workaround some of the jQuery Validate limitations (it cannot validate internalized dates): You can use Globalize.js parseDate instead of kendo.parseDate if it is the desired way to go.

Regards,
Georgi Krustev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ruud
Top achievements
Rank 1
answered on 29 Jul 2015, 07:07 AM

Hi Georgi,

Thanks for your reply. I did use this technique of making my own overrides for the $.validator.methods.date functions. 

The issue was that the appropriate globalization files were not updated any more after a UI language change by the user. This has to do with the script bundling; I construct the correct Url to the globalization files by combing the selected UI language and the path in the bundle configuration class. This will work when the user logs in, but not if he changes the languages during the session. 

So I moved the links back to the layout view, now it works again. I tried a little bit too much cleanup i guess..

0
Urvish
Top achievements
Rank 2
answered on 28 Sep 2015, 11:43 AM

datepicker not working i.e. date is not accepting dd/MM/yyyy format
eg. model is accepting the MM/dd/yyyy format whereas i want the data to be written in dd/MM/yyyy format. i have tried culture and format both on my model as well as editor template side but still no effect. What shall be done now?

Here is my code
model:
[UIHint("Date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime? WarrantyEndDate { get; set; }

datetime editor template:
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))

I am still getting date in the same MM/dd/yyyy format which in turn is giving me 'must be a date' validation. please help me in this.
0
Ruud
Top achievements
Rank 1
answered on 28 Sep 2015, 11:53 AM

Hi Georgi,

Thanks for your reply. I did of course study this guide; it is just quite a puzzle to get it in a standards MVC project up and running. Lots of script to include, lots of extra work arounds etc. It takes up quite some time; so I hoped some MVC application would be out there to demonstrate how to handle this. But I guess I will have to do some thinking myself :).

Meanwhile FYI for anyone using JayData; I did run into an issue not Telerik specific; I use the JayData client side framework as my data provider; this component seems to always use the en-US locale. Which makes sense. But, Telerik controls of course will work with the selected locale, which can be an issue if you try to display and edit values directly via JayData. It seems to be an issue with numeric (decimal) values only; dates are working fine. For now, I just set the Telerik controls configuration to "en-US" and that works (you do have to instruct your users to use the . as a decimal seperator). The "asKendoDataSource" method does not solve this as well btw. 

Regards,

Ruud

0
fernando ramirez
Top achievements
Rank 1
answered on 01 Dec 2015, 01:50 AM

Did you solve this issue? If so do you mind sharing your solution...

Facing the same problem

Regards

0
Jody
Top achievements
Rank 1
answered on 28 Apr 2016, 03:44 PM

Is it just me who thinks that this is a complete nonsense.

Surely a plugin should just work.

Telerik is an expensive product and the amount of work to get it to do anything other than look pretty in a contrived simple example is a complete joke.

I am having issues with this stil on release 2016 Q1

 

0
Kiril Nikolov
Telerik team
answered on 02 May 2016, 08:49 AM
Hello Ron,

As I already asked in another thread - can you please elaborate a bit more what is the issue that you are facing and what you are trying to do, so we can further assist you?

Thanks for the help!

Regards,
Kiril Nikolov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Graham
Top achievements
Rank 1
answered on 16 Sep 2016, 01:55 PM

This is a big issue that doesn't seem to be getting resolved. I have lost a day trying to get what is a simple date picker to work. Whenever I use the kendo version I just get blocked by this validation problem. I have tried all of the formatting and the culture variations:

 

    @Html.Kendo().DatePickerFor(model => model.Added)

      .Format("dd/MM/yyyy").ParseFormats(new List<string>()
                    {
                    "dd/MM/yyyy",
                    "dd/MM/yy",
                    "dd MMM yyyy"
                    })

 

but it just comes back with validation errors. Once again I find myself ripping out the Telerik solution for a much simpler and working solution from either jquery ui or hand rolled. What should be a simple implementation is, like so many other of their controls, difficult to work with.

0
Kiril Nikolov
Telerik team
answered on 17 Sep 2016, 06:25 AM
Hi Graham,

Can you please open a separate support request with a sample attached and we will be happy to help.

Regards,
Kiril Nikolov
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Date/Time Pickers
Asked by
Jark Monster
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Peter
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Atanas Korchev
Telerik team
Michiel
Top achievements
Rank 1
ShareDocs
Top achievements
Rank 1
Johan
Top achievements
Rank 1
mohamed
Top achievements
Rank 1
Alev
Top achievements
Rank 1
Ruud
Top achievements
Rank 1
Urvish
Top achievements
Rank 2
fernando ramirez
Top achievements
Rank 1
Jody
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Graham
Top achievements
Rank 1
Share this question
or