Time Format in Blazor TimePicker Component

7 Aug 20261 minute to read

Display Format

The display format controls how the time value is shown in the TimePicker control.

By default, the TimePicker’s format follows the culture. You can override this by setting your own Custom Format or Standard Format through the Format property.

Once the Format property is set, it is applied consistently to all cultures, regardless of their conventions for representing the time value. The format you specify becomes the standard way the time value is displayed and entered in your application.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" Format="HH:mm:ss" @bind-Value="@Value"></SfTimePicker>


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

    Time Format in Blazor TimePicker

    Input Formats

    The input format controls how the time value is entered in the TimePicker control.

    The InputFormats property defines the string formats the TimePicker accepts from the user. When the user types a time in any of the specified input formats, the value is automatically converted to the display format after pressing Enter, the Tab key, or when the input loses focus. This allows intuitive data entry through multiple accepted formats. Use the InputFormats property to specify one or more Custom Format or Standard Format strings as an array.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" Format="HH:mm:ss" InputFormats='new string[] { "hh:mm tt", "hh mm tt" }' @bind-Value="@Value"></SfTimePicker>


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

    See also