ASP.NET MVC TimeDurationPicker Overview

The Telerik UI TimeDurationPicker HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI TimeDurationPicker widget.

The TimeDurationPicker component enables the end user to select a time range stored in milliseconds.

• Demo page for the TimeDurationPicker

Initializing the TimeDurationPicker

The following example demonstrates how to define the TimeDurationPicker.

 @(Html.Kendo().TimeDurationPicker() .Name("timeDurationPicker") )

Basic Configuration

To configure the TimeDurationPicker, pass the configuration options as attributes of the helper.

 @(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.

Next Steps

• Getting Started with the TimeDurationPicker
• Basic Usage of the TimeDurationPicker for ASP.NET MVC (Demo)

See Also

• Configuring the TimeDurationPicker Columns
• Using the API of the TimeDurationPicker for ASP.NET MVC (Demo)
• Knowledge Base Section