ASP.NET Core TimeDurationPicker Overview

Telerik UI for ASP.NET Core Ninja image

The TimeDurationPicker is part of Telerik UI for ASP.NET Core, 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 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.

            <kendo-timedurationpicker name="timedurationpicker"></kendo-timedurationpicker>

Basic Configuration

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

            .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);
        <kendo-timedurationpicker name="timedurationpicker" separator=":">
                <timedurationpicker-column name="hours" format="## hours "></timedurationpicker-column>
                <timedurationpicker-column name="minutes" format=" ## minutes"></timedurationpicker-column>
                <timedurationpicker-column name="seconds" format=" ## seconds"></timedurationpicker-column>

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