Wrong DateFormat with Jquery Datepicker

Question

I want to exclude the time part in the DateTime Textbox, but I can't make it work the way I want.

This is how I set up the field :

@Html.TextBoxFor(m => m.DateFrom, "{0:dd/MM/yyyy}", new { @class = "datefrom" })
@Html.TextBoxFor(m => m.DateTo, "{0:dd/MM/yyyy}", new { @class = "dateto" })

Jquery script:

    $(function () {
        $(".datefrom").datepicker({
            defaultDate: "+1w",
            changeMonth: true,  
            numberOfMonths: 1,
            dateFormat: "dd/mm/yy",
            onClose: function (selectedDate) {
                $("#to").datepicker("option", "minDate", selectedDate);
            }
        });
        $(".dateto").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            dateFormat: "dd/mm/yy",
            onClose: function (selectedDate) {
                $("#from").datepicker("option", "maxDate", selectedDate);
            }
        });
    });

Now I have these problems :

• the time always appear in the field :

• the date format is wrong : my format is dd/MM/yyyy, the date is November 8th 2014 but now the datepicker "thinks" it is August 10th 2014. So when I choose an arbitrary date from the datepicker by the format dd/MM/yyyy , asp.net will treate it with the format MM/dd/yyyy

What I have tried :

• I tried to use DataAnnotations : [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")] : not worked

• I tried to remove the Jquery script, not worked

P/s : althought the datetime textbox contains time part at the first load, after choosing a date from the datepicker, the time part is gone, but the date is in the wrong format as I mentioned above :

Answer 1

The reason why you date is not being correctly bound is that your datepicker is using dd/MM/yyy format, but you server is using MM/dd/yyyy format. To make this work, you can create a custom model binder to handle DateTime values and parse them to the format you want.

public class CustomDateTimeBinder : IModelBinder
{
  public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
  {
    var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
    CultureInfo culture = new CultureInfo("en-GB"); // dd/MM/yyyy
    var date = value.ConvertTo(typeof(DateTime), culture);
    return date;
  }
}

and register it in Global.asax (this means it will apply to all DateTime values

ModelBinders.Binders.Add(typeof(DateTime), new YourAssembly.CustomDateTimeBinder());