title: Unobtrusive Validation on en-GB Dates
body: <p>I am designing a data input form using asp.net MVC4 which has an input of type date.</p>
  
  <p>Using the unobtrusive jQuery library in chrome and jQueryUI datepicker I was still getting an error (The field news_date must be a date.), after selecting a correct date format, using the datepicker (i.e. 14/02/2013) and submitting the form.</p>
  
  <p>Some <a href="http://blog.brainnovative.com/2010/12/globalizing-aspnet-mvc-unobtrusive.html" rel="nofollow">searching</a> suggested I should use the jQuery.globilization library. So after reading the <a href="https://github.com/jquery/globalize#parseDate" rel="nofollow">documentation</a> I added a reference to the following script.</p>
  
  <pre><code>$(document).ready(function () {
      $.culture = Globalize.culture("en-GB");
      $.validator.methods.date = function (value, element) {
          return this.optional(element) || Globalize.parseDate(value, "dd/MM/yyyy", "en-GB");
      }
  });
  </code></pre>
  
  <p>However I am still getting the error</p>
  
  <p>If I debug the the above code in chrome i can see that the value of "value) is "2014-02-14".</p>
  
  <p>Below is html which gets rendered.</p>
  
  <pre><code>&lt;div class="editor-field"&gt;
  
  &lt;input class="text-box single-line datepicker hasDatepicker input-validation-error" data-val="true" data-val-date="The field news_date must be a date." id="news_date" name="news_date" type="date" value=""&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          $(".datepicker").datepicker({ dateFormat: "dd/MM/yyyy" });
      });
      &lt;/script&gt;
              &lt;span class="field-validation-error" data-valmsg-for="news_date" data-valmsg-replace="true"&gt;&lt;span for="news_date" class="" style=""&gt;The field news_date must be a date.&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong>: incidentally if i change my validator method to hardcode. 
  i.e.</p>
  
  <pre><code>$.validator.methods.date = function (value, element) {
      return this.optional(element) || Globalize.parseDate("14/03/2014", "dd/MM/yyyy", "en-GB")
  }
  </code></pre>
  
  <p>It works. So it definately appears to be the format that the date is being stored on the page prior to POST or submit validation which is the issue. </p>
  
  <p><strong>UPDATE</strong>
                after selecting the date if i run <code>$('#news_date').val()</code> in the chrome console, i get "2014-02-14" and i can debug my script and see the value being passed it the validator method it is this value and thus it doesnt match the british date format thus returning a null, rather than a value which would pass validation. So is my problem with how the datepicker is storing the date after selection?</p>
  
  <p>Has anyone found a workaround for this in Chrome?</p>