DateTime Format in Blazor DateTime Picker

14 Aug 20261 minute to read

Display date and time format

The display format defines how the date and time value is shown in the DateTimePicker.

When Format is not set, the component uses its built-in default pattern. You can apply a custom or standard .NET date and time format by using the Format property. For culture-aware display, build the value from the current culture’s DateTimeFormat (for example, @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern).

<SfDateTimePicker TValue="DateTime?" Format="yyyy-MM-dd HH:mm"></SfDateTimePicker>

When a format string is specified, it is used consistently regardless of culture settings. This provides a predictable, standardized representation for both display and entry.

RAZOR

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" Format="yyyy-MM-dd hh:mm:ss" @bind-Value="@Value"></SfDateTimePicker>


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

Input Formats

The input format controls how users can type date and time values in the DateTimePicker.

The formats you specify determine the patterns users can enter. When the user types a value matching one of the input formats, it is parsed and then redisplayed using the configured display format after pressing Enter/Tab or when the input loses focus. This allows flexible, intuitive entry using multiple patterns. Configure acceptable formats with the InputFormats property (a string[]) using .NET custom or standard date/time format strings. Order matters: when input is ambiguous, the first matching format in the array is used.

RAZOR

@using Syncfusion.Blazor.Calendars

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


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