Issue with jQuery datepicker and client side validation for dates in ASP.net MVC 4

Question

This is an Asp.net MVC application. I have installed packages jQuery.alidation.Globalize and jQuery.UI.i18n and have set fixed culture "es-PY" in web.config

<globalization enableClientBasedCulture="true" uiCulture="es" culture="es-PY" />

I have set this culture also for jQuery validations:

$(document).ready(function () {
    Globalize.culture('es-PY');
    $.datepicker.setDefaults($.datepicker.regional["es"]);
    $("input[type='date']").datepicker();
});

Also i have decorated Dates properties as follow in my model:

[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public System.DateTime Fecha { get; set; }

I'm facing problems with displaying the jQuery datepicker, as you can see from the image i get not one, but two dropdown calendars, apart from that in the text input the value is seted to dd/mm/aaaa, it should be rendered with the Fecha property. When i try to select a date from the calendar the client validation fails which is disconcerting me because es-PY culture accept dd/MM/yyyy date format.

So my question actually are two in one: Why i am getting two calendars for the inputbox and what else should i do to get the date pass validation in client browser?

enter image description here

Did you use EditorFor? If you have an email control template, it will use that as the editor, and then you applied another using the datepicker plugin. — Tieson T.
– Tieson T., Commented Jun 13, 2014 at 22:14
@TiesonT. Yes I use editor for, I dont get you when you say an email control template? — E-Bat
– E-Bat, Commented Jun 13, 2014 at 22:21
possible duplicate of Format Date with culture in Razor @Html.EditFor — Fals
– Fals, Commented Jun 13, 2014 at 22:21
@Elio.Batista If you want to use the datepicker plugin, change EditorFor to TextBoxFor - otherwise the Razor engine will create a <input type="date" /> element, and then it's up to the browser to decide what to do. — Tieson T.
– Tieson T., Commented Jun 13, 2014 at 22:37
@Elio.Batista Sorry, the "email" bit was me not paying attention to what I was typing; that should have read "a date control template". For instance, I use Telerik UI controls, and one of the things they add is an EditorTemplate folder in Shared. That means a DateTime property triggers the Razor engine to use Telerik's Date.cshtml template when using EditorFor. — Tieson T.
– Tieson T., Commented Jun 13, 2014 at 22:41

Tieson T. · Accepted Answer · 2014-06-13 23:06:38Z

2

If you want to use the datepicker plugin, change EditorFor to TextBoxFor - otherwise the Razor engine will create a <input type="date" /> element, and then it's up to the browser to decide what to do.

For instance, I use Telerik UI controls, and one of the things they add is an EditorTemplate folder in Shared. That means a DateTime property triggers the Razor engine to use Telerik's DateTime.cshtml or Date.cshtml (depending on the data-annotated type) template when using EditorFor.

The same would be true if you had any property that mapped to the name of an editor template.

answered Jun 13, 2014 at 23:06

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with jQuery datepicker and client side validation for dates in ASP.net MVC 4

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related