title: jQuery datepicker displays different on Chrome and on Firefox
body: <p>In an MVC3 application I use a jQuery datepicker plugin that is displayed completely different in Firefox and in Chrome. There is the relevant code in the application and two screenshots:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.ui.datepicker-fr.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function () {
              $('.datefield').datepicker({
                  showOn: 'both',
                  buttonImage: "/content/images/calendar.gif",
                  showAnim: "clip",
                  regional: "fr",
                  defaultDate: null,
                  changeMonth: true,
                  changeYear: true
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  @using(...)
  {
      ...
      @Html.LabelFor(model =&gt; model.candidat.date_naissance)
      @Html.EditorFor(model =&gt; model.candidat.date_naissance, new { @class = "date" })
      ...
  }
  </code></pre>
  
  <p>I use an EditorTemplate:</p>
  
  <pre><code>@model DateTime
  @Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
    new { @class = "datefield", type = "date" })
  </code></pre>
  
  <p>In the model, the field candidat.date_naissance is:</p>
  
  <pre><code>[Required(ErrorMessageResourceType = typeof(CandidatResources), ErrorMessageResourceName = "RequiredDateNaissanceMessage")]
  [Display(ResourceType = typeof(CandidatResources), Name = "DateNaissanceDisplay")]
  [DataType(DataType.Date, ErrorMessageResourceType = typeof(CandidatResources), ErrorMessageResourceName = "InvalidDateNaissanceMessage")]
  public System.DateTime date_naissance { get; set; }
  </code></pre>
  
  <p>The generated HTML is:</p>
  
  <ul>
  <li><p><em>in Firefox:</em></p>
  
  <pre>
  input type="date" value="12/19/1974" name="candidat.date_naissance" id="candidat_date_naissance" data-val-required="La date de naissance est obligatoire" data-val="true" class="datefield hasDatepicker"
  </pre></li>
  <li><em>in Chrome:</em>
  
  <pre>
  input class="datefield hasDatepicker" data-val="true" data-val-required="La date de naissance est obligatoire" id="candidat_date_naissance" name="candidat.date_naissance" type="date" value="12/19/1974"
  </pre></li>
  </ul>
  
  <p>Finally, here are the tho screenshots of the <strong>same</strong> data: </p>
  
  <p>Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/g40dF.jpg" alt="Firefox" title="Firefox"> </p>
  
  <p>Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/kSUx2.jpg" alt="Chrome" title="Chrome"></p>
  
  <p>In Chrome, the string "mm/dd/yyyy" is invariably displayed, even if there is a date already present (e.g. after the date was input and saved in Firefox, I expect to see it in Chrome too on refresh but that does not happen).</p>
  
  <p>What could be the explanation of such a behavior and how to fix it?</p>
  
  <p>I already tried <a href="https://stackoverflow.com/questions/2271807/jquery-ui-datepicker-and-google-chrome-not-working" title="this solution">this solution</a>, but to no avail.</p>
  
  <p><strong>Note:</strong>
  This happens both on Cassini server and on the IIS (both local and in a virtual box).</p>