Demonstration and configuration of the Radzen Blazor TimeSpanPicker component.
These demos showcase a time span picker with two-way data binding, min/max value constraints with automatic button hiding, inline picker mode, various configuration options, custom format strings, and custom input parsing with ParseInput parameter for flexible time span entry.
As all Radzen Blazor input components, the TimeSpanPicker has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.
Value property can be used to set the value of the component and Change event to get the user input.
In this example, you can only set a value between 0 and 12h.
Note that the + and - buttons are hidden because you cannot choose a negative value.
Use Inline="true" to display the time span picker as an always-visible control without a popup.
Configure step increments, visible components, and other display options for the time span picker.
Use the Format property to customize how the time span value is displayed in the input field.
The ParseInput parameter allows you to use a custom input parsing method.
This way you can accept inputs like '30h 15min' or '-120s', or support more than one input format.
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor TimeSpanPicker component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a TimeSpanPicker component. |
| Enter | Open the popup. |
| Tab on open popup | Navigate forward across available picker components. |
| Shift + Tab on open popup | Navigate backward across available picker components. |
| Esc in an opened popup | Close the popup. |