Date Format EN-AU Not accepting dd/mm/yyyy Client-side and Server-Side

Question

I have several pages which use jquery UI date pickers for my viewmodel datetime properties. Here is my viewmodel:

public class UsageFilterViewModel : BaseModel
{
    [Display(Name="Entity Name")]
    public string EntityName { get; set; }
    public string UserLogin { get; set; }
    public int[] SelectedQuestionGroup { get; set; }
    public IEnumerable<SelectListItem> QuestionGroups { get; set; }
    [Display(Name = "Date From"), DataType(DataType.DateTime)]
    public DateTime? DateFrom { get; set; }
    [Display(Name = "Date To"), DataType(DataType.DateTime)]
    public DateTime? DateTo { get; set; }
    [Display(Name="Exclude IP")]
    public string ExcludeIP { get; set; }
    public string URL { get; set; }
}

My view:

@using (Html.BeginForm(null, null, FormMethod.Get, new { @class = "form-horizontal", @id = "formfilter" }))
{
    @Html.AntiForgeryToken()
    <input type="hidden" value="True" name="Display" />
    <table class="table table-condensed table-responsive table-hover smart-form">
    <tr>
        <th>Entity Name</th>
        <td>@Html.TextBoxFor(m => m.EntityName, new { @style = "width: 75px" })</td>
        <th>User Login</th>
        <td>@Html.TextBoxFor(m => m.UserLogin, new { @style = "width: 75px" })</td>
        <th>Question Group</th>
        <td>@Html.ListBoxFor(m => m.SelectedQuestionGroup, Model.QuestionGroups, new { @class = "select2", @multiple = "multiple" })</td>
    </tr>
    <tr>
         <th>From</th>
         <td>
             <div class="input-group" style="width:100px;">
             @Html.TextBoxFor(m=>m.DateFrom, Model.DateFrom.HasValue ? Model.DateFrom.Value.ToShortDateString() : null, new { @placeholder = "From", @style = "width: 75px" })
             <span class="input-group-addon"><i class="fa fa-calendar"></i></span>

             @Html.TextBoxFor(m=>m.DateTo, Model.DateTo.HasValue ? Model.DateTo.Value.ToShortDateString() : null, new { @placeholder = "To", @style = "width: 75px" })
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              </div>
          </td>
          <th>Exclude IP</th>
          <td>@Html.TextBoxFor(m => m.ExcludeIP, new { @style = "width: 75px" })</td>
          <th>URL</th>
          <td>@Html.TextBoxFor(m => m.URL, new { @style = "width: 75px" })</td>
      </tr>
   </table>
   <div class="widget-footer">
       @Html.ValidationSummary(false, null, new { @class = "alert alert-warning fade in" })
       <button class="btn btn-info" type="submit">Display</button>
   </div>
}

My javascript that creates the datepickers:

$(document).ready(function () {
    $("#DateFrom").datepicker({
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 3,
        dateFormat: 'dd/mm/yy',
        prevText: '<i class="fa fa-chevron-left"></i>',
        nextText: '<i class="fa fa-chevron-right"></i>',
        onClose: function (selectedDate) {
            $("#DateTo").datepicker("option", "minDate", selectedDate);
        }

    });
    $("#DateTo").datepicker({
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 3,
        dateFormat: 'dd/mm/yy',
        prevText: '<i class="fa fa-chevron-left"></i>',
        nextText: '<i class="fa fa-chevron-right"></i>',
        onClose: function (selectedDate) {
            $("#DateFrom").datepicker("option", "maxDate", selectedDate);
        }
    });
});

On the client-side: the validation is passing when I enter a date such as '21/04/2015', and the datepicker is creating dates in the correct format. Therefore the page is posting back.

On the server-side: the validation is failing.

ModelState.IsValid = false

When the view renders, the Html.ValidationSummary renders this:

The value '20/04/2015' is not valid for Date From. The value '21/04/2015' is not valid for Date To.

As per this explanation, my Web.Config explicitly sets the culture to EN-AU:

<system.web>
    <globalization uiCulture="en-AU" culture="en-AU" enableClientBasedCulture="false" />
</system.web>

I have tried this solution, but with the same result.

The request-headers for the HTTP request are:

Accept-Language:en-GB,en;q=0.8

I can get the client-side working by overriding the jquery ui date format:

$.validator.methods.date = function (value, element) {
    var dateRegex = /^(0?[1-9]\/|[12]\d\/|3[01]\/){2}(19|20)\d\d$/;
    return this.optional(element) || dateRegex.test(value);
};

Also,

@System.Threading.Thread.CurrentThread.CurrentCulture returns "en-AU"

It seems that by setting the culture in the Web.config, it should accept that format for dates, currency, etc.

How can I get it working for dd/mm/yyyy both client and server-side?

I will also be introducing globalisation in the future, so I want the solution to be ready for other locales.

Answer 1

There are two changes:

1. en-au date format is: dd/MM/yyyy (note the MM). Specify the following attribute for the data fields in the model.

   [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]

2. On jquery date picker, change the date format to 'dd/MM/yyyy' otherwise it will send year in two digits.

Answer 2

The solution to this is to use the HTTP POST method instead of GET, as per: this answer. It is not an ideal solution, because sometimes I want to submit forms using the GET method to submit back to the same action.

I would like to overwrite the GetHttpHandler like this, but without using and displaying anything in the Routes.