Model DataAnnotation [DataType(DateType.Date)] renders DatePicker but hides my value?

Question

I have 3 date fields in my INV_Assets model: acquired_date, disposed_date, and created_date. I have them displaying as format MM/dd/yyyy in some @Html.EditorFor()'s.

What I'm attempting to do now is add a simple datepicker functionality, which is where I came across THIS post about using [DataType(DataType.Date)] attribute on my model properties. My created_date is currently set as:

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime created_date { get; set; }

This renders the dropdown functionality, but the value in the box appears exactly as "mm/dd/yyyy" instead of showing the actual value. For example, if I remove the [DataType(DataType.Date)] attribute:

    [Required]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime created_date { get; set; }

My value shows up as "02/10/2015" without the datepicker functionality.

Can anyone provide an example of how I can render this datepicker functionality but show the actual value of my field in the box (when a value is present)?

---

EDIT: The created_date field on my View is currently defined as follows (following Chris' suggestion I attempted to force the value to be in format YYYY-MM-DD):

    <div class="form-group">
        @*@Html.LabelFor(model => model.created_date, htmlAttributes: new { @class = "control-label col-md-2" })*@
        <span class="control-label col-md-2">Created Date:</span>
        <div class="col-md-10">
            @Html.EditorFor(model => model.created_date, new { htmlAttributes = new { @class = "form-control", @Value = Model.created_date.ToString("YYYY-MM-DD") } })
            @Html.ValidationMessageFor(model => model.created_date, "", new { @class = "text-danger" })
        </div>
    </div>

This renders the following code:

<input value="YYYY-02-DD" class="form-control text-box single-line" data-val="true" data-val-date="The field created_date must be a date." data-val-required="The created_date field is required." id="created_date" name="created_date" type="date">

Solution 1

I'm assuming you're also using the HTML 5 date input type, i.e. <input type="date">. The value for a date input type, must be an ISO formatted date: YYYY-MM-DD. The placeholder you see there is just the browser providing a more user-friendly display, but it's converting to/from the ISO format behind the scenes. If you don't provide a proper ISO date, then it's essentially treated by the browser as no value at all.

Solution 2

This worked for me

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

Following Chris Pratt's Idea

Comments

[Analytic Lunatic]

Thanks for replying Chris. I'm still a bit lost but provided an EDIT above with more info? Essentially what I'm going for is to display my [DateTime] values in the box on load (if present), and provide a DatePicker where appropriate for a user to select, then to Save that Date with the current Time back to the DB.

[Chris Pratt]

Well, your main problem is that you didn't use a proper DateTime format. You used YYYY-MM-DD, whereas Microsoft requires yyyy-MM-dd. That's why the value ended up as YYYY-02-DD. The MM was the only part it could translate. This is just one more of a myriad of reasons why you should use view models. For editing you can set the date format to yyyy-MM-dd, so you can play nice with the date input, and for display you can have a different model that uses whatever format you like.