Overview

As its name implies, our Blazor Time Edit allows users to modify time values via its time editor or its drop-down time picker. A user can enter time values into the text box or select time values via its drop-down window. To specify time values in code, use the Time property.

The Time Edit component supports different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes in this demo, use the drop-down list in the demo card's header.

Null Time Values

To clear our Blazor Time Edit and set its value to null, simply:

  • Delete the time value within the Time editor.
  • Click the Clear button. To display this button, set the ClearButtonDisplayMode property to Auto.

Use the NullText property to display placeholder text in the Blazor Time Edit when its value is null.

Display Format

Use the DisplayFormat property to format the Time Edit’s display value when the editor is not focused, and the Format property to format the editor’s value in edit mode when the editor is focused. If the DisplayFormat property is not set, the Format is applied for both display and edit modes.

Our Blazor Time Edit supports standard formats. See the Standard Date and Time Format Strings and Custom Date and Time Format Strings MSDN articles for more information.

Time Range

Use the MinTime and MaxTime properties to specify an available time range. Our Blazor Time Edit's drop-down will automatically disable (gray out) values that are outside a specified range. If a user tries to select an unavailable time value via the roller, the component displays a notification message. If a user enters a value outside the range within the edit box, our Blazor Time Edit retains the previously selected time.

In this demo, the DevExpress Blazor Time Edit component only allows users to select time values for the current hour.

Read-Only and Disabled Modes

In this demo, our Blazor Time Edit displays values but does not allow users to make modifications to time values. To replicate this behavior, you can use any of the following:

  • Read-only mode. In this mode, you can use the keyboard to focus and navigate the component. Set the ReadOnly property to true to activate this mode.
  • Disabled mode. In this mode, the component cannot be focused or navigated. Set the Enabled property to false to activate this mode.