Telerik blogs

See how to give your end users a place to add a time duration, and style this input with ease!

Progress Telerik brings a new control TimeDurationPicker to UI for ASP.NET Core. It allows input event durations with great visual appeal, is easy to validate, and intelligently defines custom shortcuts with predetermined intervals that make sense to facilitate inputs for the end users.

TimeDurationPicker asks how long will your next task take with input for hours and minutes and three common suggestion at the top. Currently it shows 1 hour 2 minutes

You can set it up as your need, from day to millisecond. The value returned is in milliseconds, so you can transform the “value” property as your need to store it.

In addition, ad a custom caption for any input so you deliver real-meaning data to your end user.

This code:

<kendo-timedurationpicker on-change="onChange" id="timedurationpicker" separator=":">
            <shortcut text="40min" value="2400000"></shortcut>
            <shortcut text="1h 20min" value="4800000"></shortcut>
            <shortcut text="2 hours" value="7200000"></shortcut>
            <timedurationpicker-column name="hours" format="## my hours "></timedurationpicker-column>
            <timedurationpicker-column name="minutes" format=" ## my minutes"></timedurationpicker-column>
            <timedurationpicker-column name="seconds" format=" ## my seconds"></timedurationpicker-column>

Generates this interface:

blank my hours : blank my minutes : blank my seconds with clock icon on right

Note that the caption could be whatever you like or just empty, like:

blank : blank : blank, with clock icon on right

The panel to select is shown when you click on the clock-arrow icon.

On the field with blank my hours : blank my minutes : blank my seconds with clock icon on right, user has clicked the clock icon. Now there are three selection wheels for hr, min, sec. Three common suggestions are at the top. Cancel and Set buttons are at the bottom

TimeDurationPicker is part of the UI for ASP.NET Core library and other Kendo UI frameworks like Kendo UI for jQuery. Explore the DevCraft bundle for multiple frameworks—it is the best option for licensing multiple Progress Telerik products.


The appearance of this component can be changed to the four states called FillMode: solid, flat, outline and none.

Below is a sample showing how to set up FillMode using “Kendo Tag.”

FillMode with options for outline, flat, none, solid

Let’s compare dark and light themes!

FillMode Outline

Dark theme

The entry field is outlined. The background is black and the outline is bright gray.

Material theme

The entry field is outlined. The background is very light gray and the outline is dark gray

FillMode Flat

Dark theme

There's no distinction of the field. It's just white text on black background

Material theme

There's no distinction of the field. It's just black text on light gray background

FillMode Solid

Dark theme

A subtle outline distinguishes the field from the background

Material theme

A slightly darker gray than the background is behind the field

Size Property

The input comes with the Size enum property that allows controlling how big or small it will look.

ComponentSize  is highlighted and option sare Large, Medium, Small, None

Large – call for the attention of the end user in small screens

Medium – a small emphasis

None – default control size

Small – when the space on the screen is expensive

Rounded Property

With this enum property, you can control the border of the control to adjust as your design needs.

Rounded shows options for Large, Full, Medium, None, Small

Light Theme vs. Dark Theme


ends look like half a circle
ends look like half a circle






At the bottom of this post is a step-by-step guide demonstrating how to start a project using Progress Telerik UI for ASP. NET Core.

Now let’s take a look at this code:

Sample 1

<div class="nextTask">
    <label for="timedurationpicker">How long will take your next task:</label>
        .Shortcuts(s =>
            s.Add().Text("1h 20min").Value(4800000);
            s.Add().Text("2 hours").Value(7200000);
        .Columns(c =>
            c.Hours().Format("## hours ");
            c.Minutes().Format(" ## minutes");
        .Content("Start task")
        .Events(ev => ev.Click("onClick")))


Here you can visualize the UI result.

How long will your next task take, with field currently reading 1 hour : 20 minutes, with a clock icon at the right, and below a Start task button. This all uses the dark theme.

You can similarly add the control to your interface from any “Kendo Tag” you choose, HTML or Tag.

Clarifying, when you start a new UI for ASP. NET Core project using the wizard, you will be prompted to choose the “Kendo Tag” for development.

HTML/Tag options

Kendo Tags are client-side components used as an alternative to traditional HTML input fields or radio buttons. They provide many features, such as auto-complete, multi-selection, drag-and-drop and templating. These tags can be used to display data in a meaningful and organized way.

Sample 2

<kendo-timedurationpicker name="timedurationpicker" separator=":">
            <shortcut text="40min" value="2400000"></shortcut>
            <shortcut text="1h 20min" value="4800000"></shortcut>
            <shortcut text="2 hours" value="7200000"></shortcut>
            <timedurationpicker-column name="hours" format="## hours "></timedurationpicker-column>
            <timedurationpicker-column name="minutes" format=" ## minutes"></timedurationpicker-column>


Sample 3

.Shortcuts(s =>
s.Add().Text(“1h 20min”).Value(4800000);
s.Add().Text(“2 hours”).Value(7200000);
.Columns(c =>
c.Hours().Format("## hours “);
c.Minutes().Format(” ## minutes");

Look at Sample 1 and observe that you can use mixed “Kendo Tags.”

Kendo UI

I’m here to tell you that the TimeDurationPicker is designed on top Kendo UI, a JavaScript framework from Progress Telerik.

But what is that? Kendo UI is a powerful and intuitive framework that makes building interactive web applications fast and easy. It is designed to help developers create visually appealing and highly functional applications tailored to their specific needs. With its comprehensive library of user interface components, image and styling options, and JavaScript framework, Kendo UI offers the tools for crafting high-performance, responsive web applications.

Kendo UI offers a comprehensive integration package with popular server-side development technologies such as ASP. NET, MVC, PHP and Node.js. In addition, with its templates and support for multiple devices, you can quickly scale and adapt your applications to fit different devices and environments.


Kendo UI Kits for Figma: Material, Fluent, Bootstrap, Default - with Kendoka

Are you or your team using Figma? That’s great. Progress Telerik has a pack for Figma!

You’ll find all four themes there!

Download DevCraft

Take advantage of Telerik UI for ASP.NET Core TimeDurationPicker, and any of the other 110+ ready-made components, like the Grid and Charts. Start a free trial today and experience for yourself that building rich interactive applications in half the time is just a click away.

As mentioned above, I recommend starting a Telerik DevCraft trial as this is the best option to explore Progress Telerik.

Download DevCraft Trial

Check How Easy It is to Set up a New Project

Following the download, you will select the desired package: Telerik UI for ASP. NET Core.

Screenshot showing 27 products available to install - select from the list

After installing the packages with the installer, open Visual Studio and access the menu Extensions -> Telerik -> Telerik UI for ASP. NET Core and select “Create New Telerik Project.”

Extensions - Telerik - Telerik UI for ASP. NET Core - Create New Telerik Project

Select the desired name and location for the project.

Configure your new project has spots for project name, location, solution name

You can choose templates and the “Kendo Tag.”

Create New Project has templates. User chooses Tag - Admin and Html - Dashboard

Some templates are not available in both Html and Tag.

Choose your color theme. Here a dark theme was selected. Do you know that you can customize your themes?

Theme selection options with preview - here showing classis-main-dark

Here is the new project.

Solution Telerik AspNetCoreApp1 with complete file set

Feel free to share your experience and ideas in the comments section below or by visiting the Telerik UI for ASP. NET Core Feedback Portal. Your input makes a difference!

Save your time, save your end user time. So let’s start coding with UI for ASP.NET Core.

References to Check out

About the Author

Jefferson S. Motta

Jefferson S. Motta is a senior software developer, IT consultant and system analyst from Brazil, developing in the .NET platform since 2011. Creator of www.Advocati.NET, since 1997, a CRM for Brazilian Law Firms. He enjoys being with family and petting his cats in his free time. You can follow him on LinkedIn and GitHub.

Related Posts


Comments are disabled in preview mode.