DxTimeEditSettings.Format Property

Specifies the pattern used to format time editor values.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string Format { get; set; }

Property Value

Type	Default	Description
String	null	The format pattern. If it is not set, the long time format is applied.

Remarks

Use the Format property to format the time editor value when the editor is focused, and use the DisplayFormat to format the value when the editor is unfocused. If the DisplayFormat property is not set, the Format property affects both edit and display values.

Refer to the Standard Date and Time Format Strings and Custom Date and Time Format Strings help topics for more information about supported formats.

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 format at runtime, use the ITimeEditSettings.Format property instead.

Implements

Format