CODEWITHSUNDEEP
c#htmldateasp.net-corerazor
Guillermo Oramas R.
Guillermo Oramas R.

Reputation: 1303

HTML 5 Input date not showing the value specified

NET Core** project and in one of my pages to edit a record the <input type="date"> is not showing me the value I'm passing it when I create the view in Razor.

This is my Razor code:

<div class="input-group">
    <div class="input-group-prepend">
        <i class="input-group-text fa fa-user"></i>
    </div>
    @Html.TextBoxFor(model => model.NewPriceList.PriceFrom, 
                     new { @class = "form-control", @type = "date", 
                           @Value = Model.NewPriceList.PriceFrom })
</div>

And this is what I can see in the Google Chrome developer tool thats been created as HTML

<input class="form-control" data-val="true" 
       data-val-required="The Obwiązuje od field is required." 
       name="NewPriceList.PriceFrom" type="date" 
       value="2/15/2019 12:00:00 AM">

But for some reason its not rendering correctly and this is what I get:

enter image description here

Upvotes: 1

Views: 1221

Answers (2)

itminus
itminus

Reputation: 25380

You need specify the rfc3339 format

@Html.TextBoxFor(
    model => model.NewPriceList.PriceFrom , 
    "{0:yyyy-MM-dd}",
    new { 
        @type= "date",
        @class = "form-control"
        @value = Model.NewPriceList.PriceFrom
    }
)

Or if you just want to use the model to render the value, you don't have to specify a @value=:

@Html.TextBoxFor(
    model => model.NewPriceList.PriceFrom , 
    "{0:yyyy-MM-dd}",
    new { 
        @type= "date",
        @class = "form-control"
    }
)

Or simply use InputTagHelper:

<input asp-for="NewPriceList.PriceFrom" class = "form-control" >

The InputTagHelper will choose the right format automatically for you if you use a [DataType(DataType.Date)] attribute annotation.

Upvotes: 3

Micha&#235;l Corriveau-C&#244;t&#233;
Micha&#235;l Corriveau-C&#244;t&#233;

Reputation: 443

Format the date to ShortDate. A DateControl doesnt like time of the day : 

<input class="form-control" data-val="true"
       data-val-required="The Obwiązuje od field is required."
       name="NewPriceList.PriceFrom" type="date"
       [email protected]()>

Upvotes: 0

Related Questions