DxTimeEdit<T>.ScrollPickerFormat Property

Specifies the scroll picker’s time format.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

[Parameter]
public string ScrollPickerFormat { get; set; }

Property Value

A time formatting pattern.

|

Remarks

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

The scroll picker can include the following columns, depending on the culture. You can customize the format, order, and visibility of these columns using the ScrollPickerFormat property.

• Hour (in 12-hour or 24-hour format)
• Minute
• Second
• Period (AM/PM)

Use a single character value for ScrollPickerFormat property to display the scroll picker in one of the predefined time formats:

• t - display hour, minute, and an optional period (AM/PM), in the user’s regional format.
• T - display hour, minute, second, and an optional period (AM/PM), in the user’s regional format.
• r - display hour, minute, and second, using a 24-hour clock.

<DxTimeEdit @bind-Time="time"
            Format="T"
            ScrollPickerFormat="r" />

@code {
    TimeSpan time = DateTime.Now.TimeOfDay;
}

Specify a custom format pattern for ScrollPickerFormat property to fully control the scroll picker’s columns. A pattern consists of one or more time format specifiers, optionally separated by spaces or other non-specifier characters. Each specifier defines the column format. The sequence of specifiers in the pattern determines the columns’ order and visibility. Separator characters do not change the appearance of the UI. You can add them to improve the readability of the format pattern.

<DxTimeEdit @bind-Time="time"
            Format="T"
            ScrollPickerFormat="tt | h | m" />

@code {
    TimeSpan time = DateTime.Now.TimeOfDay;
}

Note

The custom format pattern must be at least two characters long.

The format of the scroll picker and the Time Edit’s input field are independent of each other. To set the Time Edit’s input field format, use the following properties:

FormatApply the same time format in display and edit modes.DisplayFormatSpecify the time format only for display mode. See Also

DxTimeEdit<T> Class

DxTimeEdit<T> Members

DevExpress.Blazor Namespace