Aspnetcore: <input type="date"/> breaks when adding bind="@model.name"

Created on 22 May 2018  路  4Comments  路  Source: dotnet/aspnetcore

            <div class="formCont1">
                <input type="date" />   
            </div>

This shows a datepicker with native styling from the browser,

If i make it
<input type="date" bind="@ath.EmailAddres"/>
the date picker becomes unusable, in firefox it simply keeps resetting the type to text and in chrome it resets the value to mm/dd/yyyy everytime you pick a date. Strange

area-blazor

Most helpful comment

<input type=date> requires the bound value to be of the format yyyy-MM-dd. You can use the format-value attribute to control this. Example: https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder.Client/Components/Search.cshtml#L28

All 4 comments

So this is weird, if my model property is type datetime, it does not work. If i change my model type to string, it will work.

<input type=date> requires the bound value to be of the format yyyy-MM-dd. You can use the format-value attribute to control this. Example: https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder.Client/Components/Search.cshtml#L28

For anyone late to the party, format- attributes are no longer supported. In this case, the solution is @bind:format

<input type="date" @bind="WeatherForecast.Date" @bind:format="yyyy-MM-dd" />

Note that in preview 8 (releasing soon) this will also just work for a date field without specifying a format at all.

Was this page helpful?
0 / 5 - 0 ratings