MVC 4 models not accept jquery datapicker date format

Question

I am using Entity framwork 6 , MVC 4 and jquery datepicker. When fill all the form data and press the submit button the ModelState.IsValid always return false value, because the jquery datepicker value not match with the model validation field.

in .cshtml file

-----
-----
@Html.TextBoxFor(m => m.Annieversary, new { id = "anudate", @class = "form-control datetimepicker", @placeholder = "Annieversary Date" })
-----
-----

c# Side

    [Required(ErrorMessage = "This field is required")]

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

I tried below

@Html.TextBoxFor(m => m.Annieversary,"{0:dd/MM/yyyy}", new { id = "anudate", @class = "form-control datetimepicker", @placeholder = "Annieversary" })

This is also not match with the model, always return null value. I know c# only accept the "MM/DD/YYYY" format but jquery datepicker return "DD/MM/YYYY" format. How can I solve this problem?

Answer 1

First of all, let's simplify so it can work. Then you can add the attributes you feel you need.

Model
Notice that I am using the question mark to make the field nullable - as I understand you will need it:

public DateTime? Anniversary { get; set; }

View
Notice the datepicker class, which we will use to call the jQuery UI DatePicker component:

@Html.TextBoxFor(m => m.Anniversary, new { @class = "datepicker" })

JavaScript
Notice that I am setting the dateFormat to the format you need. That helps but it's not enough just yet:

<script>
$(function () {
    $(".datepicker").datepicker({ dateFormat: "dd/mm/yy" });
});
</script>

Web.Config
Now, here is where the magic happens. You need to set the culture of your application in order to have the proper date format. I have it set to pt-BR, which gives the same date format you need:

<globalization culture="pt-BR" uiCulture="pt-BR"/>

That should do it, but it's the most basic example.

The most important thing to remember is: The date format should always match the culture you set in the web.config.