Why are DateTime editors not showing the view model values?

Question

I have a DateTime property declared in my edit and create view models like:

[DataType(DataType.Date)]
[Display(Name = "Start")]
public DateTime DateTimeStart { get; set; }

I use EditorForModel to render editors for the whole view model, but when I fetch a record to edit, the view model properties get the correct values, as I have proven by showing them with a DisplayTextFor, yet the DateTime pickers rendered by MVC are empty, and when dropped down, show today's date. Why are these not showing the intended date values?

When you use [DataType(DataType.Date)] ASP.NET MVC generates an input field type="date". Browsers with support for HTML5 (Chrome) use a date-picker on such fields. The value of the field must be formatted as YYYY-MM-DD to correctly display. Do you get different results in IE, Chrome, FF? — Erwin, Nov 28 '12 at 12:56
@Erwin, I didn't check browsers besides Chrome, but I only tried yy/mm/dd and yy-mm-dd, not yyyy. I've since worked around the problem, but will have another look later. — ProfK, Nov 28 '12 at 16:20
I hope [this][1] helps you. P.S. I had the same and that helped me [1]: http://stackoverflow.com/questions/12633471/mvc4-datatype-date-editorfor-wont-display-date-value-in-chrome-fine-in-interne — Alik Khilazhev, Nov 08 '14 at 18:38

score 1 · Answer 1 · answered Nov 12 '13 at 14:48

1

I had to set an additional data annotation on my model property to solve this problem.

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

I was experiencing the same issue that you were. The user will still see mm/dd/yyyy format in the input field. This is just to format the data as it is assigned using the built-in HTML EditorFor helper.

answered Nov 12 '13 at 14:48

brian s

385
2
10

I had the above but had "{0:dd/MM/yyyy}" in my model prop thinking it was the output format i wanted. This fixed my issue, thanks. – ChrisCarroll Oct 09 '19 at 14:34

score 0 · Answer 2 · edited May 23 '17 at 12:18

You can use DisplayTemplates and EditorTemplates to define how properties of a particular type are displayed.

In the Views > Shared folder create a folder called DisplayTemplates and another called EditorTemplates you can then add custom templates to these for each different type of property you want to display. The templates work in a similar way to a partial.

I have one for DisplayTemplate for DateTime

@model DateTime
@if (Model.Value.Year == 1) {
    @Html.TextBox("", "") 
} else {
@Html.TextBox("", (Model.Value.ToString("dd/MM/yyyy"))) 
}
<span class="help-text">dd/mm/yyyy</span>

Here is an EditorTemplate for TimeSpan

@model TimeSpan

@Html.DropDownList("", Enumerable.Range(0, 30)
    .Select(i => new SelectListItem { Value = i.ToString(), 
    Text = i.ToString(), Selected = Model.Days == i })) days  

@Html.DropDownList("", Enumerable.Range(0, 24)
    .Select(i => new SelectListItem { Value = i.ToString(), 
    Text = i.ToString(), Selected = Model.Hours == i })) hours : 

@Html.DropDownList("", Enumerable.Range(0, 60)
    .Select(i => new SelectListItem { Value = i.ToString(), 
    Text = i.ToString(), Selected = Model.Minutes == i })) minutes : 

@Html.DropDownList("", Enumerable.Range(0, 60)
    .Select(i => new SelectListItem { Value = i.ToString(), 
    Text = i.ToString(), Selected = Model.Seconds == i })) seconds

I would caution that you can spend a lot of time try to get EditorForModel to work exactly how you want it but there will always be cases where it doesn't work quite right and you have to resort to hand coding.

We now use an HTML helper to wrap our custom HTML around each property this can work nicely alongside the custom templates described but allows a lot more flexibility too. We used this page as inspiration for our custom HTML wrappers. ASP.NET MVC 3 Custom HTML Helpers- Best Practices/Uses See the answer with the highest number of up votes rather than the accepted answer.

Yeah, thanks, I worked around by using a date editor template, and jQuery UI DatePicker. — ProfK, Nov 28 '12 at 16:19
Please feel free to mark it as an answer if you feel that's appropriate. — Tom Styles, Nov 29 '12 at 14:47
Sorry Tom, but your answer doesn't address why the built-in date editor for DataType.DateTime isn't working, which is my question. — ProfK, Dec 01 '12 at 12:21

score 0 · Answer 3 · answered Mar 30 '13 at 13:35

0

It's up to the browser. As of now, only Opera gives you a datepicker for the HTML5 date input type.

answered Mar 30 '13 at 13:35

jamin

1
1

I wouldn't be asking why the datepickers were wrong if they weren't there, so at least Chrome also gives you that control. – ProfK Mar 31 '13 at 05:56

Why are DateTime editors not showing the view model values?

3 Answers3