CODEWITHSUNDEEP
c#asp.net-mvcdata-annotations
amsga
amsga

Reputation: 108

How do I show the DateTime in the view using the DataType.Date data annotation?

I am having problems getting the DateTime object from my model to display in the date time picker. Originally, I treated it as text with a particular format using the DisplayFormat DataAnnotation.

I have tried adding the DataType DataAnnotation. I have tried adding the Required DataAnnotation I have tried changing the DisplayFormat to dd/MM/yyyy.

I have seen datatype.date annotation not showing calendar in firefox and have tested with the latest version of Chrome and Firefox.

Original Billing.cs

[DataMember]
[Display(Name = "Start Date")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy MMM dd}")]
public System.DateTime StartDate { get; set; }

Tested with Billing.cs

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

Edit.cshtml

<div class="form-group row">
    @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "col-form-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })
    </div>
</div>

I was expecting to see the date being shown in the date picker. But instead I see the "dd/mm/yyyy" placeholder.

If I view page source, I do see that the page does indeed get the expected date from our database.

<input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="StartDate" name="StartDate" type="date" value="01/01/2018">

I am not sure if I am missing anything else or not.

Upvotes: 1

Views: 1027

Answers (1)

amsga
amsga

Reputation: 108

After further testing with the date format, I did not expect that the browser was expecting the date value to be in the form of "yyyy-MM-dd".

After changing the DataFormatString value from my currently used format to "yyyy-MM-dd", the date picker was able to show the correct date.

Upvotes: 1

Related Questions