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.

<input asp-for="OprettetDato" class="form-control"/>

the property of the model is declared like this:

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

and the value is passed over in the model

Why isn't this working?

Because you were unsatisfied with explanation below, I would like to ask what your question is: *why* or *how to resolve this problem*? — Marcin Zablocki, Feb 16 '17 at 15:21
My problem got solved by removing the DisplayFormat tag from the model -i did this because you got my attetion to the tag in the first place- In that way the HTML5 datepicker could display my date properly. — Tirdyr, Feb 16 '17 at 15:58

score 11 · Accepted Answer · edited Jun 20 '20 at 09:12

11

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)]

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 16 '17 at 14:51

Marcin Zablocki

10,171
1
37
47

1

I wanted the HTML5 datepicker, and i have (Now) been reading the link you provided. I tried removing the [DisplayFormat] (and keep the Datatype). This actually makes the picker work. in my locale timeformat, this is what i wanted – Tirdyr Feb 16 '17 at 15:27
You didn't stated that in your question. – Marcin Zablocki Feb 16 '17 at 15:29
1

your right, but i didnt realize that was the problem.. :=) – Tirdyr Feb 16 '17 at 15:50
2

The format string does not need to be escaped in order to use forward slashes. The following works: `[DisplayFormat(DataFormatString = "{0: dd/MM/yy}", ApplyFormatInEditMode = true)]` – RonC Apr 07 '17 at 14:41
2

when I remove data type render of the input box is changed to datetime. So this is not the thing that I want. I could not override current text format for the date. I'm stuck. – Ozan BAYRAM Dec 04 '18 at 08:37

score 3 · Answer 2 · answered Apr 17 '21 at 05:39

3

Here is the solution to my problem

https://forums.asp.net/t/2167833.aspx?Date+control+is+not+showing+value+from+model

[DisplayFormat(ApplyFormatInEditMode = false, DataFormatString = "{0:dd/MM/yyyy}")]

ApplyFormatInEditMode = false

answered Apr 17 '21 at 05:39

Matías Gallegos

111
5

score 0 · Answer 3 · answered Mar 16 '20 at 11:19

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'
        });

score 0 · Answer 4 · answered Oct 24 '21 at 02:35

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

<div class="form-group">
                @{
                    string date = "";
                    if (Model.OprettetDato != null) 
{ date = DateTime.Parse($"{Model.OprettetDato }").ToString("yyyy-MM-dd");}
                }
              <label asp-for="OprettetDato" class="control-label"></label>
              <input asp-for="OprettetDato" value = "@date" class="form-control" />
                <span asp-validation-for="OprettetDato" class="text-danger"></span>
            </div>

Try this.

Date input tag helper is not showing the date from database

4 Answers4

Linked