MVC3 date validation fails on Mac

Question

Short version:

I’ve built a simple website with ASP.NET MVC3, and I’ve run into a peculiar issue with date-fields, the jQuery datepicker, validation and Mac browsers. In short, the date-field is validated correctly on a PC, but fails on a Mac (I’ve tried Safari and Firefox): The Mac browser will trigger the validation, claiming the date is in an incorrect format, which it isn’t.

Long version:

The model is a “News” object, which is defined in EF4.1 class. I wanted to “augment” the class a bit, telling the MVC framework the property “PublishOn” is a date, so I added this code:

[MetadataType(typeof(NewsMetadata))]
public partial class News
{
    // ... 
}

public class NewsMetadata
{
    [DataType(DataType.Date)]
    [Display(Name="Publish on")]
    public DateTime PublishOn { get; set; }
}

I then added a template in Views/Shared/EditorTemplates/ to automatically add a “date” css class attribute to the textbox:

@model DateTime 
@Html.TextBox("", Model.ToString("dd-MM-yyyy"), new { @class = "date" })

Finally, in my edit view, I sprinkled some jQuery magic to get the nifty datepicker:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  $().ready(function () {
    $('.date').datepicker({ dateFormat: "dd-mm-yy" }); 
  });    
</script>

Btw, a note on the dateFormat: "dd-mm-yy" parameter: If I set it to "dd-mm-yyyy", the datepicker sets the value wrong, with a double year, i.e. "01-01-20122012"!!! Strange.

And the PublishOn property is done like this:

<div class="editor-label">
  @Html.LabelFor(model => model.PublishOn)
 </div>
 <div class="editor-field">
   @Html.EditorFor(model => model.PublishOn)
   @Html.ValidationMessageFor(model => model.PublishOn)
 </div>

Which emits this HTML:

<div class="editor-label">
  <label for="PublishOn">Publish on</label>
</div>
<div class="editor-field">
  <input class="date" data-val="true" data-val-required="The Publish on field is required." id="PublishOn" name="PublishOn" type="text" value="22-12-2011" />
  <span class="field-validation-valid" data-valmsg-for="PublishOn" data-valmsg-replace="true"></span>
</div>

This works perfectly on IE9 on my PC. But on a Mac (both Firefox and Safari) the validation kicks in and claims the date is in an invalid format!

I suspect that the Mac browser doesn't honour the dateformat from your code but uses the system-side setting for that... and since those could differ you get such a strange behaviour... — Yahia
I'm sure you're right. But how do I work around it? Disabling the client-side validation for just that one property would be ok. — Jakob Gade
you can disable the client-side validation for Mac clients only (which requires to either inspect the HTTP Header User Agent server-side OR do the browser detection client-side and conditionally use .datepicker({ constrainInput: false }) ).. you can skip the client-/browser-specific part IF you can live with disabling client-side validation on all clients (PC + Mac) — Yahia

Yahia Yahia · Accepted Answer · 2011-08-24T06:42:28

As per discussion in the comments above:

Disabling the client-side validation use

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  $().ready(function () {
    $('.date').datepicker({ constrainInput: false });
  });    
</script>

[EDIT] AND remove [DataType(DataType.Date)] from the respective property. [/EDIT]

see the jQuery reference at http://jqueryui.com/demos/datepicker/#option-constrainInput

MVC3 date validation fails on Mac

1 Answers