Browser date formatting lets Blazor display a bound DateTime using the user's local date convention. For inputs with type="date", datetime-local, month, or time, omit culture and format attributes: Blazor supplies a culture-neutral value that the browser renders locally. section 33.4.2
Choose the binding approach that matches the required control over presentation:
- Use @bind:culture to select the CultureInfo used for formatting. section 33.4.2
- Use @bind:format to provide an explicit DateTime format string. section 33.4.2
- Use a date-related HTML input type when the browser should own localized presentation. section 33.4.2
Let the browser format a bound date
<input class="form-control" type="date" @bind="Time" /> section 33.4.2
Listing 33.20 Using a DateTime property in the Bindings.razor file in the Blazor folder
@using System.Globalization
<div class="form-group">
<label>City:</label>
<input class="form-control" @bind-value="City"
@bind-value:event="oninput" />
</div>
<div class="p-2 mb-2">City Value: @City</div>
<button class="btn btn-primary" @onclick="@(() => City = "Paris")">
Paris
</button>
<button class="btn btn-primary" @onclick="@(() => City = "Chicago")">
Chicago
</button>
<div class="form-group mt-2">
<label>Time:</label>
<input class="form-control my-1" @bind="Time"
@bind:culture="Culture" @bind:format="MMM-dd" />
<input class="form-control my-1" @bind="Time"
@bind:culture="Culture" />
<input class="form-control" type="date" @bind="Time" />
</div>
<div class="p-2 mb-2">Time Value: @Time</div>
<div class="form-group">
<label>Culture:</label>
<select class="form-control" @bind="Culture">
<option value="@CultureInfo.GetCultureInfo("en-us")">
en-US
</option>
<option value="@CultureInfo.GetCultureInfo("en-gb")">
en-GB
</option>
<option value="@CultureInfo.GetCultureInfo("fr-fr")">
fr-FR
</option>
</select>
</div>
@code {
public string? City { get; set; } = "London";
public DateTime Time { get; set; }
= DateTime.Parse("2050/01/20 09:50");
public CultureInfo Culture { get; set; }
= CultureInfo.GetCultureInfo("en-us");
}
Inspect the complete Blazor binding example, including explicit culture and format bindings alongside the browser-controlled date input. section 33.4.2
