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.

Razor

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

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 MVC (Demo)

See Also

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