How to change the DateTime Format using ToShortDateString and DatePicker

Question

I have the following field :

@Html.TextBoxFor(model => model.Patient.dateOfBirth, new { id = "datepicker", @class = "double text white" })

It is a DateTime field that has the following metadata definition:

 [Required(ErrorMessage = "Date Of Birth is required")]
 [DisplayFormat(DataFormatString = "{0:dd MMM yyyy}")]
 public DateTime dateOfBirth;

The issue is that i need it to show the DOB as d/m/y but as a datetime cause i am using a datepicker that needs the value to remain DateTime.

Date picker returns a value that has the dd/mm/yy format. (.ToShortDateString() cant save me this time )

I've tried Darin Dimitrov Answers from here and here , but unless I am a complete moron those don't really work for me.

Later Edit:
I have managed to find the solution for this and wanted to share it with whomever needs it from now on.

 @Html.HiddenFor(model => model.DOBirth, new { id = "shortDate", @class = "double text white" })

 @Html.TextBox(" ", Model != null ? Model.dateOfBirth.Value.ToShortDateString() : string.Empty, new { id = "datepicker", @class = "double text white" })

And use the following Jquery :

 $('#datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            inline: true,
            onSelect: function (dateText, inst) { CalculateAge(dateText); } //an extra method
        });

Store the value you get into your hidden field ( via Jquery through the id of the hidden field "shortDate") and thus you can send the value back to the controller

Darin Dimitrov · Accepted Answer · 2012-06-26T09:54:14.733

I've tried Darin Dimitrov Answers from here and here , but unless I am a complete moron those don't really work for me.

That's because you forgot to add ApplyFormatInEditMode = true in your [DisplayFormat] attribute:

[Required(ErrorMessage = "Date Of Birth is required")]
[DisplayFormat(DataFormatString = "{0:dd MMM yyyy}", ApplyFormatInEditMode = true)]
public DateTime dateOfBirth;

and then:

@Html.EditorFor(model => model.Patient.dateOfBirth)

Another possibility is to write a custom editor template for a date picker:

[Required(ErrorMessage = "Date Of Birth is required")]
[DisplayFormat(DataFormatString = "{0:dd MMM yyyy}", ApplyFormatInEditMode = true)]
[UIHint("DatePicker")]
public DateTime dateOfBirth;

and inside ~/Views/Shared/EditorTemplates/DatePicker.cshtml:

@Html.TextBox(
    "", 
    ViewData.TemplateInfo.FormattedModelValue, 
    new { @class = "double text white datepicker" }
)

and inside your view:

@Html.EditorFor(model => model.Patient.dateOfBirth)

Notice that I have applied the datepicker class instead of using an id to aviod conflicts if you have more than one DateTime field. You will need to adapt your selector accordingly: $('.datepicker').datepicker(); instead of $('#datepicker').datepicker(); that you are currently using.

cant really use editor .. need my id and my class; and because i dont use editor i considered not using ApplyFormatInEditMode = true — Mihai Labo, Jun 26 '12 at 09:51
In this case you could write a custom editor template as shown in my second example. This being said you don't necessarily need to add the classes and id to the text field. You could very easily wrap it in a div and apply those classes to this div and then simply adapt your selectors. So the first solution is still a good and working one. — Darin Dimitrov, Jun 26 '12 at 09:56
sorry i was in my lunch break... I'm gonna try and use the div approach; I'll let you know how it went — Mihai Labo, Jun 26 '12 at 11:11

How to change the DateTime Format using ToShortDateString and DatePicker

1 Answers1