The Blazor TimePicker component offers an intuitive interface for selecting time values with adjustable intervals and format options. It includes min/max restrictions, customizable display, templates, and accessibility support for efficient time entry across devices.

The TimePicker provides an option to customize the display format in the component using the Format property.

TimePicker provides an option to select a time value within a specified range by using the Min and Max properties. The Min value should always be lesser than the Max value. The Value property depends on the Min/Max with respect to StrictMode property.

The TimePicker component supports the Step property, which sets the gap between consecutive time options in the list. This makes time selection faster and more organized, helping users choose times in fixed intervals.

The TimePicker component supports different label display modes through the FloatLabelType property. This property controls how the label or placeholder text appears in relation to the input field.

The floating label behavior can be configured with the following options:

• Auto: The floating label appears above the input field when it is focused or has a value. This is the default state.
• Always: The floating label always remains above the input field.
• Never: The label never floats above the input field when the placeholder is available.

The masking feature allows users to enter a time in the correct format, as specified by the Format property. This helps to ensure that the time is entered correctly and can also make it easier for users to understand how to enter the time. The EnableMask property in the TimePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific time format pattern for entering the time.

The TimePickerMaskPlaceholder directive allows you to set custom placeholder text for each segment of the time format in a TimePicker component. This can be used to provide additional context or instructions to the user about the expected format for the input. To use the directive, include it in the component’s configuration along with the EnableMask property.

The TimeOnly type is a new type in .NET 6 that allows you to represent a time without a date component. To use it with the Blazor TimePicker component, set the type parameter to TimeOnly.

The StrictMode property controls how typed input is validated against the configured Min and Max range. If the value is invalid, the component value sets to the previous value. If the value is out of range, the component sets the time value to Min/Max value.

The following example demonstrates the TimePicker in StrictMode with Min/Max range of 10:00 AM to 4:00 PM . It allows to enter only valid time within the specified range.

• If you enter the out-of-range value like 8:00 PM, the value sets to the Max time 4:00 PM as the value 8:00 PM is greater than Max value of 4:00 PM.
• If you enter invalid time value like 9:00 tt, the value sets to the previous value.

The following code demonstrates the DateTimePicker with StrictMode as true.

This sample demonstrates the list of events of the TimePicker component which will be triggered for appropriate TimePicker actions.