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.
- Adaptiveness—The TimeDurationPicker supports adaptive mode that provides mobile-friendly rendering by automatically adjusting its popup layout based on screen size.
- Model Binding—Bind the TimeDurationPicker to a model field of type
decimal?and configure the input mode and columns. - Events—Handling the events of the TimeDurationPicker allows you to implement custom functionality.
- Accessibility—The TimeDurationPicker is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.