DxTimeEdit<T> Class

A Time Edit component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxTimeEdit<T> :
    DxDropDownBase<T, DropDownJSInteropProxy>,
    IInputBase,
    IDropDownJSInteropProxyServer,
    IJSCallback,
    IDisposable

Type Parameters

Name Description
T

The data type. Supported types: DateTime, Nullable DateTime, TimeSpan, and Nullable TimeSpan.

Remarks

The DevExpress Time Edit for Blazor (<DxTimeEdit>) displays a drop-down time picker. A user can enter the time into the text box or pick it in the drop-down window.

Time Edit Overview

Run Demo: Time Edit

Add Time Edit to a Project

To add the <DxTimeEdit> component to an application, follow the steps below:

  1. Create an application. If you use Microsoft project templates, configure the application as described in this topic: Microsoft Templates.
  2. Add the <DxTimeEdit>...</DxTimeEdit> markup to your application.
  3. Configure the component (see the sections below).

Edit Value

Use the Time property to specify or read the control's edit value. To limit the value range, use the MinTime and MaxTime properties. Refer to Set a Time Range.

You can use the @bind attribute to bind the Time property to a data field. Refer to Two-Way Data Binding.

<DxTimeEdit @bind-Time="@TimeValue" ></DxTimeEdit>

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

If you do not use two-way binding, handle the TimeChanged event to respond to the editor's time change. The code below enables the Update Time button if the specified value differs from the system time.

<DxTimeEdit Time="@Time" 
            TimeChanged="@((TimeSpan newValue) => OnTimeChanged(newValue))">
</DxTimeEdit>

<button type="button" class="btn btn-primary" disabled="@IsDisabled">Update Time</button>

@code {
    TimeSpan Time = DateTime.Now.TimeOfDay;
    bool IsDisabled = true;

    void OnTimeChanged(TimeSpan newValue) {
        Time = newValue;
        if (newValue != DateTime.Now.TimeOfDay)
            IsDisabled = false;
        else IsDisabled = true;
    }
}

Nullable Time

If the Time Edit component is bound to a nullable DateTime or TimeSpan object, users can delete the editor's value (set it to null).

You can also set the ClearButtonDisplayMode property to Auto to show the Clear button when the editor has a non-null value. Use the NullText property to specify the prompt text when the editor's value is null.

<DxTimeEdit @bind-Time="@TimeValue"
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
            NullText="Select time...">
</DxTimeEdit>

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

Time Edit ClearButton

Run Demo: Time Edit - Nullable Time

Time Format

Use the following properties to specify a value format:

  • Format - applies the same time format in display and edit modes
  • DisplayFormat - specifies the time format in display mode

See the Standard Date and Time Format Strings and Custom Date and Time Format Strings MSDN articles for more information about supported formats.

The following example demonstrates how to apply the a 12-hour clock format in display mode and the a 24-hour clock format in edit mode:

<DxTimeEdit @bind-Time="@TimeValue"
            Format="HH:mm"
            DisplayFormat="@DisplayFormat"></DxTimeEdit>

@code {
    TimeSpan TimeValue { get; set; } = DateTime.Now.TimeOfDay;
    string DisplayFormat { get; } = string.IsNullOrEmpty(System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.AMDesignator) ? "HH:mm" : "h:mm tt";
}

Time Edit Format

Run Demo: Time Edit - Display Format

Set a Time Range

Use the MinTime and MaxTime properties to specify a range of available time values.

The Time Edit's time picker disables dates that are out of the range. The Time Edit component shows a notification message each time a user tries to navigate to a time value that is out of the range. To customize the notification text, use the OutOfRangeNotificationText property.

If a user types a value that is out of the range, the Time Edit keeps the previously selected time.

The default minimum and maximum values are System.DateTime.MinValue and System.DateTime.MaxValue.

NOTE

The maximum time value should be greater than the minimum time value. Otherwise, an exception occurs.

The code below implements the Time Edit component that allows users to select time from the current hour.

<DxTimeEdit @bind-Time="@TimeValue"
            MinTime="@MinTime"
            MaxTime="@MaxTime">
</DxTimeEdit>

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

    protected override void OnInitialized() {
        MinTime = new TimeSpan(TimeValue.Hours, 0, 0);
        MaxTime = new TimeSpan(TimeValue.Hours, 59, 59);
    }
}

Time Edit - Time Range

Run Demo: Time Edit — Time Range

Size Modes

Use the SizeMode property to specify a Time Edit size. The code below applies different size modes to Time Edit components.

<DxTimeEdit @bind-Time="@TimeValue" SizeMode="SizeMode.Small"></DxTimeEdit>

<DxTimeEdit @bind-Time="@TimeValue" SizeMode="SizeMode.Medium"></DxTimeEdit>

<DxTimeEdit @bind-Time="@TimeValue" SizeMode="SizeMode.Large"></DxTimeEdit>

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

Time Edit - Size Modes

For more information, refer to Size Modes.

Input Validation

You can add a standalone Time Edit or a Form Layout to the Blazor's standard EditForm. This form validates user input and informs users of errors. Use the model's data annotation attributes to specify input restrictions.

<EditForm Model="@starship" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout >
        <DxFormLayoutItem Caption="Time:" ColSpanMd="6" >
            <Template >
                <DxTimeEdit @bind-Time="@starship.Time" />
            </Template>
        </DxFormLayoutItem>
        @*...*@
    </DxFormLayout>
</EditForm>

@code {
    private Starship starship=new Starship();
}

For more information, refer to the following help topic: Validate Input.

Run Demo: Form Validation

Use the DropDownDirection property to specify the direction in which the drop-down window is displayed relative to the input element. The default value is Down. The following code changes the direction to Up:

<DxTimeEdit Time="DateTime.Now.TimeOfDay" DropDownDirection="DropDownDirection.Up" />

Time Edit - Window Direction

NOTE

If the editor is close to a browser window's edge and there is not enough space to display the drop-down window in the specified direction, the drop-down window is displayed in the opposite direction.

Read-Only State

<DxTimeEdit> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxTimeEdit @bind-Time="@Time" ReadOnly="true"> </DxTimeEdit>

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

Run Demo: Time Edit - Read-Only and Disabled Modes

HTML Attributes

You can use HTML attributes to configure the Time Edit.

<DxTimeEdit Time="DateTime.Now.TimeOfDay" autocomplete="on"></DxTimeEdit>

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDataEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxResizableEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDropDownBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxTimeEdit<T>
See Also