Skip to main content

DxTimeEdit<T>.ScrollPickerFormat Property

Specifies the scroll picker’s time format.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public string ScrollPickerFormat { get; set; }

Property Value

Type Description

A time formatting pattern.


The Time Edit’s default scroll picker format depends on the current culture. The following image shows the scroll picker’s appearance for the English (United States) culture:

Time Edit without Specified Format

Use the ScrollPickerFormat property to specify a time formatting pattern. The pattern consists of format specifiers and separators that define the order and composition of visible scroll picker columns (hour, minute, second, and period of the day).

The Time Edit’s scroll picker supports the following time format specifiers:

  • h and hh for hours
  • m and mm for minutes
  • s and ss for seconds
  • t and tt for a day period
  • One or more characters enclosed in apostrophes or a space character to delimit format specifiers

The following example shows how to define the scroll picker format:

<DxTimeEdit @bind-Time="TimeValue" ScrollPickerFormat="tt hh" Format="hh tt" />

@code {
    TimeSpan? TimeValue { get; set; } = DateTime.Now.TimeOfDay;

Time Edit with Formatted Scroll Picker and Input

You can also specify a value format in the Time Edit’s input in the following cases:

  • To apply the same time format in display and edit modes, use the Format property.
  • To specify the time format only for display mode, use the DisplayFormat property.
See Also