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

DatePicker format will not validate even

23 Answers 2494 Views

Date/Time Pickers

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

Jark Monster asked on 27 Feb 2013, 01:54 PM

DatePicker.PNG

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

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>

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

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.

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!

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>

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.

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

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

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):

http://docs.telerik.com/kendo-ui/aspnet-mvc/validation

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

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

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.

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

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.