ASP.NET Core TimeDurationPicker Overview
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.
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
)
<kendo-timedurationpicker name="timedurationpicker"></kendo-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(":")
)
<kendo-timedurationpicker name="timedurationpicker" separator=":">
<timedurationpicker-columns>
<timedurationpicker-column name="hours" format="## hours "></timedurationpicker-column>
<timedurationpicker-column name="minutes" format=" ## minutes"></timedurationpicker-column>
<timedurationpicker-column name="seconds" format=" ## seconds"></timedurationpicker-column>
</timedurationpicker-columns>
</kendo-timedurationpicker>
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 HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the TimeDurationPicker TagHelper for ASP.NET Core (Demo)