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.

The Time Edit supports keyboard navigation (list of supported keyboard shortcuts), allowing users to navigate to the editor's input element and within the drop-down time picker.

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.

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.

Our Time Edit component supports masked input. If you specify a mask, the input box only accepts values in a specific time format.

To enable this functionality, assign the pattern to the component's Mask property. The DxDateTimeMaskProperties component specifies additional mask settings (such as culture or caret mode). For more information about Date-Time masks, refer to the following help topic: Date-Time Masks.

Try the Mask, Caret Mode, and Culture settings to explore the different date-time mask modes.

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.