Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTimeEditSettings.ScrollPickerFormat Property

Specifies the scroll picker’s time format.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

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

#Property Value

Type Description
String

The format pattern.

#Remarks

The 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 format 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 editor’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
  • A space character to delimit format specifiers
<DxGrid Data="@timetable" EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ID" Visible="false" />
        <DxGridDataColumn FieldName="Nickname" />
        <DxGridDataColumn FieldName="StartTime">
            <EditSettings>
                <DxTimeEditSettings Format="h:mm"
                                    DisplayFormat="t" 
                                    MinTime="@MinTime" 
                                    MaxTime="@MaxStartTime" 
                                    OutOfRangeNotificationText="Game time can start from 9 am to 8 pm."
                                    ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="EndTime" >
            <EditSettings>
                <DxTimeEditSettings Format="h:mm"
                                    DisplayFormat="t" 
                                    MinTime="@MinTime" 
                                    MaxTime="@MaxEndTime"
                                    OutOfRangeNotificationText="Game time can end from 9 am to 9 pm."
                                    ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    Result[]? timetable;
    TimeSpan MinTime = new TimeSpan(09, 0, 0);
    TimeSpan MaxStartTime = new TimeSpan(20, 0, 0);
    TimeSpan MaxEndTime = new TimeSpan(21, 0, 0);

    protected override async Task OnInitializedAsync() {
        timetable = await TimeTable.GetData();
    }
}

Grid - Time Editor

To change the scroll picker’s time format at runtime, use the ITimeEditSettings.ScrollPickerFormat property instead.

#Implements

See Also