asp.net mvc - show only the date in @Html.EditorFor helper

Question

I am trying to populate @Html.EditorFor helper. I have created a view model with the below property

[DataType(DataType.Date, ErrorMessage="Date only")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yy}", ApplyFormatInEditMode = true)]
public DateTime? YearBought { get; set; }

and my helper is set up as below (a)

@Html.ValidationMessageFor(m => m.YearBought)
@Html.EditorFor(model => model.YearBought, new { @type = "date" })

I have also tried (b)

@Html.ValidationMessageFor(m => m.YearBought)
@Html.EditorFor(model => model.YearBought.Value.Date)

Using the above format (a) nothing is displayed. Using the above format (b) 12/05/2014 00:00:00 is displayed in textbox format.

I am trying to achieve a datepicker format without a time displayed

I have reviewed several other questions but cant see what i've done different.

When I look in my database, the value is save as 2014-05-12 and when I am saving the value the EditorFor helper generates the required input facility

questions reviewed

first second third....the list goes on

EDIT just opened the console in chrome dev tools and so this message

The specified value "12/05/14" does not conform to the required format, "yyyy-MM-dd"

I thought DisplayFormat(DataFormatString = "{0:dd/MM/yy}" was defining how to display my date?

Answer 1

You need to use the ISO format when using type="date"

[DataType(DataType.Date, ErrorMessage="Date only")]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime? YearBought { get; set; }

This will display the date in the browsers culture.

Note there is no need to add @type = "date". The EditorFor() method will add that because of the DataType attribute. Note also that type="date" is only supported in Chrome (FireFox and IE will just generate a normal textbox)

If you do want to display the format dd/MM/yyyy in a standard textbox then you can use

@Html.TextBoxFor(m => m.YearBought, "{0:dd/MM/yyyy}")