MVC4 format date does not validate with DisplayFormat value

Question

I've saw about 1k posts on this, but I must have missed something.

Basically, I am trying to use dd/MM/yyyy format in my site, problem occurs at validation.

I've a ViewModel:

   public class LoanBaseViewModel
    {
        public int LoanId { get; set; }

        [Required]
        [DataCompareValidation("ReturnDate", ErrorMessage = "Return date should be later than loan date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime LoanDate { get; set; }


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

In my EditorTemplate I've This:

@model System.Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:dd/MM/yyyy}", Model.Value), new { @class = "jq-date" })
}
else
{
    @Html.TextBox("", "", new { @class = "jq-date" })
}

On page Load I attach a Jquery DatePicker on the jq-date.

 $("#loanForm").find(".jq-date").datepicker({ dateFormat: 'dd/mm/yy' });

Display works fine, but every time i tried to save, it tells me date is not in correct format if I use a dd/MM/yyyy date.

Any idea why?

I've been trying for like one hour and it's driving me insane!

Thanks for your time

Tom

Edit: didn't work better What is really weird is that it does work on my laptop, but not in my desktop both of them are display date in dd/MM/yyyy, my laptop accepts 25/08/2013 but not my desktop...

Edit: Solution is here: stackoverflow.com/a/13528769/1741443.

Answer 1

Its a bit difficult to answer definitively without seeing how you have formatted the jQuery datepicker. The default return for jq-date is mm/dd/yy (all numerical data).

The formatting you've set are field-related formats; fields that are waiting for jQuery to pass it the date in a format it is expecting. The field-level formatting is not applied to jQuery - that's a separate formatting requirement.

1. I suggest you turn ApplyFormatInEditMode off / false and see if the date field works properly with datepicker.

2. If that does not work then move onto formatting the jq-date according to the below.

For more info on the Datepicker formatting options check the API documentation or go to this page

I'm sure you have already referenced both jQuery and Jquery UI on the page but you should include the following customisation for that datepicker:

<script type="text/javascript">
$(function(){ 
$('.datepicker').datepicker({dateFormat: 'dd-M-yy'});
 });
</script>

In the example above the jQuery format returns dd - two digit day of the month, M - short name for the month, and yy - four digit year.

Hope that helps.

Answer 2

Assuming your servers culture is not set to the cultural format you want to use, you need to set the globalization settings in your web.config to the culture you plan on using. I don't know where you're from, but i'll assume the UK. So you can set

 <globalization culture="en-GB"/>

This should be under <system.web>

You could also use culture="auto", in which case the culture will be selected based on the users browser culture settings.

When doing this, and using the [DataType] attribute, then you don't even need to use the [DisplayFormat] attribute.

You might also consider using HtmlAttributeProvider for adding the jq-date attribute to your date types, then no editor template is required at all for your needs. See:

http://blogs.msdn.com/b/ukadc/archive/2012/05/24/asp-net-mvc-adding-html-attributes-in-templated-helpers-editorfor.aspx

If your problem is strictly on the client-side with the jquery date control, then make sure you are initializing it in a jquery ready handler (and you don't need the form id, or the find, just use the class in the jquery selector itself).

$(function() {
    $(".jq-date").datepicker({ dateFormat: 'dd/mm/yy' });
});