DxTimeEditSettings.ScrollPickerFormat Property

Specifies the scroll picker’s time format.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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:

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

Razor

<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();
    }
}

ResultService.cs

public Task<Result[]> GetData() {
        List<Result> results = new List<Result>();

        results.Add(new Result() { ID = 11156, Nickname = "Maria", StartTime= new DateTime(2023,02,15,09,01,52), EndTime = new DateTime(2023, 02, 15, 12, 54, 57) });
        results.Add(new Result() { ID = 21200, Nickname = "Maxx", StartTime = new DateTime(2023, 02, 15, 09, 12, 36), EndTime = new DateTime(2023, 02, 15, 10, 30, 12) });
        results.Add(new Result() { ID = 23567, Nickname = "User1862", StartTime = new DateTime(2023, 02, 15, 10, 02, 43), EndTime = new DateTime(2023, 02, 15, 11, 54, 17) });
        results.Add(new Result() { ID = 34168, Nickname = "Laura", StartTime = new DateTime(2023, 02, 15, 10, 07, 58), EndTime = new DateTime(2023, 02, 15, 13, 12, 42) });
        results.Add(new Result() { ID = 51290, Nickname = "Christina", StartTime = new DateTime(2023, 02, 15, 11, 13, 10), EndTime = new DateTime(2023, 02, 15, 12, 14, 20) });
        results.Add(new Result() { ID = 56938, Nickname = "Moonlight", StartTime = new DateTime(2023, 02, 15, 12, 48, 52), EndTime = new DateTime(2023, 02, 15, 13, 52, 52) });
        results.Add(new Result() { ID = 21098, Nickname = "Fred", StartTime = new DateTime(2023, 02, 15, 13, 02, 00), EndTime = new DateTime(2023, 02, 15, 14, 03, 12) });
        results.Add(new Result() { ID = 13027, Nickname = "Fox", StartTime = new DateTime(2023, 02, 15, 13, 17, 07), EndTime = new DateTime(2023, 02, 15, 14, 07, 02) });
        results.Add(new Result() { ID = 11633, Nickname = "LEX", StartTime = new DateTime(2023, 02, 15, 14, 16, 34), EndTime = new DateTime(2023, 02, 15, 15, 01, 50) });
        return Task.FromResult(results.ToArray());
    }
}

Result.cs

    public class Result {
        public int ID { get; set; }
        public string? Nickname { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime? EndTime { get; set; }
    }

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

Implements

ScrollPickerFormat