TimeSpanPicker
Demonstration and configuration of the Radzen Blazor TimeSpanPicker component.
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. |
Supercharge your Blazor development with Radzen
Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.
Radzen Blazor Studio
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.
Radzen Blazor for Visual Studio
Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT