Model Binding

You can bind the Telerik UI for ASP.NET Core TimeDurationPicker to model fields, allowing you to edit and submit model properties directly.

The component is designed to work with the decimal? (nullable decimal) type. The value is expressed in milliseconds.

Example

csharp

    public class TimeDurationPickerViewModel
    {
        public decimal? Duration { get; set; }
    }

csharp

    public ActionResult Index()
    {
        var model = new TimeDurationPickerViewModel
        {
            // 1 hour 30 minutes in milliseconds
            Duration = 5400000m
        };
    
        return View(model);
    }

Razor

    @model TimeDurationPickerViewModel
    
    @(Html.Kendo().TimeDurationPickerFor(m => m.Duration)
          .InputMode("numeric")
          .Columns(c =>
          {
              c.Hours().Format("## hours");
              c.Minutes().Format("## minutes");
          })
    )

Razor

    @addTagHelper *, Kendo.Mvc
    @model TimeDurationPickerViewModel
    
    <kendo-timedurationpicker for="Duration" input-mode="numeric">
        <timedurationpicker-columns>
            <timedurationpicker-column name="hours" format="## hours"></timedurationpicker-column>
            <timedurationpicker-column name="minutes" format="## minutes"></timedurationpicker-column>
        </timedurationpicker-columns>
    </kendo-timedurationpicker>

Notes

• The recommended binding type is decimal?.
• The unit of the value is milliseconds.
• Validation attributes such as [Required] are supported.
• Use the InputMode() and Columns() configuration to define how the duration values are displayed and ensure proper accessibility labeling.labeling may break in some scenarios.

See Also

• TimeDurationPicker Overview

• Server-Side API

• TagHelper API