MVC 4 date culture issue?

Question

I am using MVC 4 and am wondering if there is a bug in the Datetime culture info?

I am trying to get Australian dates to work (dd/MM/yyyy), but it keeps saying that the date format is wrong, even after puttig a globalizaton to the web.config. I thought it was an error with my code, but even if you start a new project it still happens.

I started a new MVC 4 Web application.

Added the following to the web.config file

<globalization culture="en-AU" uiCulture="en-AU" />

Then I added the following to the AccountModels.cs file:

[DataType(DataType.DateTime)]
[Required(ErrorMessage="Date is required")]
public DateTime? MyDate { get; set; }

Then I added the following to the Register.cshtml file:

<li>
    @Html.LabelFor(m => m.MyDate)
    @Html.TextBoxFor(m => m.MyDate)
</li>

Run the application, go to the register page, try a date like 26/03/2013 and it says not a valid format.

Please help.

Answer 1

Try adding this attribute to your MyDate property:

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]

Though setting the culture in the web.config should do it, this should force it into that format.

UPDATE

Ok, so the above answer doesn't really solve the issue, though it is important if you do want to change the format of how the date is initially displayed. An important note is that the DisplayFormat attribute is not picked up by the TextBoxFor helper but it is by the EditorFor helper.

Anyway, on to the real solution. The problem is the jQuery validation not accounting for the culture when parsing a date. If you turn off the client side validation the date is parsed just fine on the server that is aware of the culture.

The fix is to override the jQuery validation for date and include an additional jQuery globalization plugin. You can find the globalize plugin here. You can also easily download the plugin using the Nuget Package Manager as well. I just opened the package manager, selected the Online tab on the left and typed "globalize" into the search and it was the first result. Once you have it installed I included these two files:

globalize.js
globalize.culture.en-AU.js

You can either include them directly using a script tag or place them in a bundle, perhaps with the other jQuery validation files.

Once you have those you will need to add the following script to override the jQuery validation for date:

<script type="text/javascript">
    $(function () {
        $.validator.methods.date = function (value, element) {
            Globalize.culture("en-AU");
            // you can alternatively pass the culture to parseDate instead of
            // setting the culture above, like so:
            // parseDate(value, null, "en-AU")
            return this.optional(element) || Globalize.parseDate(value) !== null;
        }
    });
</script>

And that's it, that should do the trick. I credit this solution to this answer: JQuery Validation and MVC 3. How to change date format I just also wanted to provide some more explanation specific to your issue.