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="D         


        

Answer 1

As it says in Stephen's answer, you have to make your formats match between the tags in your model to what is shown in the View, and it should be of the yyyy-MM-dd (ISO) format, regardless of how you actually want to display the date:

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

// .... your namespace .... your class....

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

And he's right, because we have [DataType(DataType.Date)], we don't need @type = date in our HtmlAttributes on the View.

Where my answer differs from his is how to actually apply the value from the Model to the control on the View. Since YearBought is a Nullable<DateTime>, we have to set it with its value a certain way, using .Value:

@Html.EditorFor(model => model.YearBought, 
    new { htmlAttributes = new { @class = "form-control datepicker", 
    @Value = Model.YearBought.Value.Date.ToString("yyyy-MM-dd") } })

Paying close attention to set the .ToString("yyyy-MM-dd"). It's not going to display in the box like that, though - at least for me - probably because my U.S. Regional settings on my computer take over and display it as MM/dd/yyyy regardless. This might confuse some, but it's better to just "do" and not worry about it.

If YearBought was just a straight DateTime instead of a DateTime?, it would be without the .Value:

@Html.EditorFor(model => model.YearBought, 
    new { htmlAttributes = new { @class = "form-control datepicker", 
    @Value = Model.YearBought != null ? 
    Model.YearBought.Value.Date.ToString("yyyy-MM-dd") : null } })

Answer 2

Alternative to the HTML type attribute, you can use an EditorTemplate in MVC to put the markup, CSS, and JS needed to render a custom editor for a known C# datatype like DateTime.

Here is a walkthrough for creating a custom 'EditorTemplate' in MVC (although not for a Date data type, but concept is the same)

Answer 3

I would make your view model's YearBought property a String for the easiest manipulation. The server can format the date, it can do the parsing on postback, and you can still use the DataType.Date data annotation for jQuery validation. This also ensures that the display value will be exactly what you want prior to being submitted to the view.

Answer 4

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}")