TimeDurationPicker Columns
The Telerik UI TimeDurationPicker for ASP.NET MVC columns configuration is mandatory and must always be configured.
The columns configuration enables you to specify which time portion columns will be visible in the TimeDurationPicker popup. Additionally, the configuration also enables you to specify format, min, max, and step values for each column individually.
Setting the Columns
The columns configuration accepts the following time units:
- days
- hours
- minutes
- seconds
- milliseconds
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
.Columns(c =>
{
c.Hours();
c.Minutes();
c.Seconds();
})
)
Format
The format configuration enables you to specify the format which will be used in the input of the component. Each column can have its own format.
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
.Columns(c =>
{
c.Hours().Format("## hours ");
c.Minutes().Format(" ## minutes ");
c.Seconds().Format(" ## seconds");
})
.Separator(":")
)
Min
The min configuration enables you to specify the minimum allowed value that can be selected for the specific column.
The following example showcases how to allow the user to select hour values starting from 6 and upwards.
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
.Columns(c =>
{
c.Hours().Format("## hours ").Min(6);
c.Minutes().Format(" ## minutes ").Min(15);
c.Seconds().Format(" ## seconds").Min(10);
})
.Separator(":")
)
Max
The max configuration enables you to specify the maximum allowed value that can be selected for the specific column.
The following example showcases how to allow the user to select hour values between 6 and 12.
@(Html.Kendo().TimeDurationPicker()
.Name("timeDurationPicker")
.Columns(c =>
{
c.Hours().Format("## hours ").Min(6).Max(12);
c.Minutes().Format(" ## minutes ").Min(15).Max(45);
c.Seconds().Format(" ## seconds").Min(10).Max(50);
})
.Separator(":")
)
Step
The step configuration enables you to specify the step value of the column. For example, if the hour step value is set to 2, the popup will display the available hours in the following manner—2, 4, 6, 8, 10, 12.
@(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(":")
)