ASP MVC 5 Date Format Validation Issue

Question

In my ASP MVC 5 web application, I need to display a date in a specific format. When the page loads, the text is formatted correctly. But if you edit the value or simply try to post, the validation error is shown:

The field is defined like this:

        @*Creation*@
    <div class="form-group">
        @Html.LabelFor(model => model.Creation, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Creation, "{0:dd/MM/yyyy}", new { @class = "form-control"})
            @Html.ValidationMessageFor(m => m.Creation)
        </div>
    </div>

The viewmodel property is defined as:

        [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    [Display(Name = "Creation", ResourceType = typeof(Resources.Resources))]
    public DateTime Creation { get; set; }

The screenshot was created using Firefox browser. If I do the same on Edge, the validation passes, but the biding of this property on the post method is invalid (a default date value).

How can I fix this issue?

Answer 1

The problem here is that, behind the scenes, the validation is actually being performed by jQuery. So the key is to tell the jQuery validator that you will be using the dd/MM/yyyy format.

There are a couple ways of doing this. The simplest way is to just override the validator function (for dates) with a simpe tweak:

jQuery(function ($) {
    $.validator.addMethod('date',
    function (value, element) {
      $.culture = Globalize.culture("en-AU");
      var date = Globalize.parseDate(value, "dd/MM/yyyy", "en-AU");
      return this.optional(element) || 
        !/Invalid|NaN/.test(new Date(date).toString());
    });
});

An alternative would be to use a globalization library for jQuery. There is a globalization library that you can use here.

When you have the library, include these files:

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

Then override the validator function:

<script type="text/javascript">
    $(function () {
        $.validator.methods.date = function (value, element) {
            Globalize.culture("en-AU"); // the UK format
            return this.optional(element) || Globalize.parseDate(value) !== null;
        }
    });
</script>