Date Format in Blazor DatePicker

14 Aug 20261 minute to read

Display Format

The display format specifies how the date value is rendered in the DatePicker input. By default, the DatePicker’s format is based on the current culture (for example, M/d/yyyy for en-US). You can override the default by setting your own .NET custom or .NET standard date format string through the Format property. Once the Format is set, it is applied consistently to all cultures, regardless of their regional conventions.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" Format="yyyy-MM-dd" @bind-Value="@Value"></SfDatePicker>


@code {
    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
}

    Date Format in Blazor DatePicker

    Input Formats

    The InputFormats property accepts an array of format strings used to parse the value typed by the user. When the user finishes typing (by pressing the Enter key, the Tab key, or when the input loses focus), the entered value is parsed against the configured input formats and converted to the Format value. The default value of InputFormats is null, which means the culture’s date pattern is used.

    You can specify one or more .NET custom or .NET standard date format strings. When multiple formats are provided, each pattern is tried in order until one parses successfully. For invalid input, the StrictMode property controls whether the value is reset or highlighted with an error style.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" Format="yyyy-MM-dd" InputFormats='new string[] { "dd/MM/yyyy", "MM-dd-yyyy", "yyyy/MM/dd" }' @bind-Value="@Value"></SfDatePicker>


@code {
    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
}

    See also