ASP.NET MVC TimeDurationPicker Overview

Telerik UI for ASP.NET MVC Ninja image

The TimeDurationPicker is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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.

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.
  • Events—Handling the events of the TimeDurationPicker allows you to implement custom functionality.

Next Steps

See Also

In this article