New to Telerik UI for ASP.NET Core? Start a free 30-day trial
ASP.NET Core TimeDurationPicker Overview
The Telerik UI TimeDurationPicker TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TimeDurationPicker widget.
The TimeDurationPicker component enables the end user to select a time range stored in milliseconds.
Initializing the TimeDurationPicker
The following example demonstrates how to define the TimeDurationPicker.
Razor
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
)Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.
Basic Configuration
To configure the TimeDurationPicker, pass the configuration options as attributes of the helper.
Razor
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
.Columns(c =>
{
c.Hours().Format("## hours ").Min(8).Max(11);
c.Minutes().Format(" ## minutes ").Min(15).Max(45).Step(5);
c.Seconds().Format(" ## seconds").Min(10).Max(50).Step(10);
})
.Separator(":")
)Functionality and Features
- Columns—The TimeDurationPicker allows you to configure the columns displayed in the popup and apply formatting to the input value.
- Shortcuts—You can add TimeDurationPicker buttons that hold certain time frame values.
- Appearance—You can use various built-in styling options that control the appearance of the TimeDurationPicker.
- Events—Handling the events of the TimeDurationPicker allows you to implement custom functionality.
Next Steps
- Getting Started with the TimeDurationPicker
- Basic Usage of the TimeDurationPicker for ASP.NET Core (Demo)