Asp.net MVC set validation confirmation date format in Chrome

Question

I'm having trouble setting the Chrome confirmation date format in asp.net mvc, for other browsers like IE, Firefox is working correctly.

I defined the dates in my model as the following code:

[Required] [Display(Name = "Data fi publicació")] [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")] public DateTime PublishingEndDate { get; set; } 

And in my views:

 @Html.TextBoxFor(model => model.PublishingEndDate) @Html.ValidationMessageFor(model => model.PublishingEndDate) 

Problem. @Html.ValidationMessageFor to check the date with the format MM/dd/yyyy , but I want to check with the European format dd/MM/yyyy . How can I change the default culture validation date format to dd/MM/yyyy ?

thanks for the help

Answer 1

Finally, I found that the problem only applies to Chrome, with IE, Firexfox it works fine, it seems to be a chrome error, I found a solution at http://forums.asp.net/t/1729179.aspx/1

The jquery validator method must be overridden using the following code:

 $(document).ready(function () { $('.calendarPicker').datepicker({ dateFormat: "dd/mm/yy" }); $.validator.addMethod('date', function (value, element, params) { if (this.optional(element)) { return true; } var ok = true; try { $.datepicker.parseDate('dd/mm/yy', value); } catch (err) { ok = false; } return ok; }); }); 

Answer 2

Make sure you set your culture in web.config. This will use the appropriate date and number formatting for the selected culture.

http://msdn.microsoft.com/en-us/library/bz9tc508(v=vs.100).aspx

Answer 3

It helps me:

 $(function() { $(".datepicker").datepicker({ todayBtn: true, language: "en-GB", format: "dd/mm/yyyy", clearBtn: true, pickTime: false }); $.validator.addMethod("date", function(value, element) { return this.optional(element) || parseDate(value, "dd-MM-yyyy") !== null; }); }); 

Answer 4

To avoid client-side validation, you do not need the data-val attributes associated with the input. So what I did was write plain HTML instead of using TextFor or EditorFor, etc.

 <input type="text" class="datepicker form-control"> 

Works great for me ...

Answer 5

If you do not want to use datetime picker:

Problems with client validation can occur due to an MVC error (even in MVC 5) in jquery.validate.unobtrusive.min.js, which does not accept a date / date format. . Unfortunately, you must solve this manually.

My final decision:

You should enable this before:

 @Scripts.Render("~/Scripts/jquery-3.1.1.js") @Scripts.Render("~/Scripts/jquery.validate.min.js") @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") @Scripts.Render("~/Scripts/moment.js") 

You can install moment.js using:

 Install-Package Moment.js 

And then you can finally add a fix for the date format syntax:

 $(function () { $.validator.methods.date = function (value, element) { return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid(); } });