1

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 :

enter image description here

  • 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 :

enter image description here

NeedAnswers
  • 1,411
  • 3
  • 19
  • 43
  • 1
    Note `[DisplayFormat(ApplyFormatInEditMode=true)]` is only applicable if you use `@EditorFor()` so its not necessary in you case. Your code for `@Html.TextBoxFor()` looks fine and works for me so something else is causing the problem. –  Nov 08 '14 at 03:31
  • @StephenMuecke : now it's displaying correctly, but when I hit the submit button, the value sent to the controller is still in `MM/dd/yyyy` format, headace! – NeedAnswers Nov 08 '14 at 03:35
  • 1
    Whats the culture on the server? It also needs to match that format for the date to bind correctly. And setting `@Value = ...` is not necessary - if you need to do this then there is some other issue. –  Nov 08 '14 at 03:38
  • @StephenMuecke I'm running on my own laptop, and the dateformat of my laptop is MM/dd/yyyy, is this the cause of the problem? – NeedAnswers Nov 08 '14 at 03:40
  • Change the format on your lap top to `dd/MM/yyyy` to check. I suspect it will now work correctly. You probably need to create a custom model binder to ensure the posted values are parsed to the correct date if you have different client and server side formats. –  Nov 08 '14 at 03:44
  • @StephenMuecke after changing the date format on my machine, it's working fine. I also take a look at examples online for custom model binding and found it hard to understand. Could you provide a simple sample please? – NeedAnswers Nov 08 '14 at 03:55
  • @StephenMuecke Oh nevermind, I got it :)thanks anyway ! – NeedAnswers Nov 08 '14 at 04:12

1 Answers1

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());