Jquery datepicker error in different browsers with mvc

Question

my view for displaying dates from a database

<div class="input-group"> @Html.TextBoxFor(model => model.domain_renew_date, "{0:dd/MMM/yyyy}", new { @type = "datetime", @class = "form-control" }) @Html.ValidationMessageFor(model => model.domain_renew_date, "", new { @class = "text-danger" }) </div> 

my javascript for datepicker

  <script type="text/javascript"> $(document).ready(function () { $('input[type="datetime"]').datepicker({ dateFormat: "dd/MM/yy", changeMonth: true, changeYear: true, yearRange: "c-10:c+10" }); }); </script> 

where property is declared

 [Display(Name = "Date of Renewal")] [DataType(DataType.Date)] [RequiredIf("domain_flag", "1", ErrorMessage = "Enter Renew Date")] public DateTime? domain_renew_date { get; set; } 

in web.config

 <system.web> <globalization uiCulture="en" culture="en-GB" /> </system.web> 

This works great in Chrome and Firefox. But gives the following error in IE and Safari

Date of Renewal field must be a date

What changes can be made to the code so that it works perfectly in all browsers?

Answer 1

The error was resolved by adding the following code

 <script> jQuery.validator.addMethod( 'date', function (value, element, params) { if (this.optional(element)) return true; var ok = true; try { $.datepicker.parseDate('dd-M-yy',value); } catch (err) { ok = false; } return ok; }, 'Must enter date in dd-M-yy format.' );