Date input tag helper is not showing the date from database

Question

When I use the following code in my edit view, it doesn\'t show the date from the model.

Answer 1

For me it was really confusing, what needs to delete and what not. what I did -

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

View, I've taken input type="text" not datetime, date or datetime-local

 <div class="form-group">
    <label>@SharedLocalizer["CalledOnText"]:</label>
        <div class="input-group date">
            <input type="text" class="form-control" asp-for="CalledOn">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
  </div>

Date Picket form Bootstrap

 $(".date").datepicker({
                format: 'dd/mm/yyyy'
        });

Answer 2

The problem is that attribute [DataType(DataType.Date)] on your model property makes the input tag helper produce type="date" HTML attribute, which in HTML5 causes fixed, standard format - see information here: Is there any way to change input type="date" format?

In order to display the field with proper format, remove [DataType(DataType.Date)] attribute and you will be fine. Additionaly, in order to have forward slashes in date format, you need to escape them like this:

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

If you want to have custom date format with datepicker, you need to use some custom JavaScript solution.

Update: Later versions of tag helpers default to the input date type if the model property is a DateTime object. To allow a custom date format ensure that the html input type is text by adding [DataType(DataType.Text)]