TimeSpanPicker
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.
Bind the value of TimeSpanPicker link
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.
Get and Set the value of TimeSpanPicker using Value and Change event. link
Value property can be used to set the value of the component and Change event to get the user input.
Min and Max values link
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.
Inline picker link
Various configurations link
Time span format link
Custom input parsing link
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.
Keyboard Navigation link
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. |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT