TimeDurationPicker Columns
The Kendo UI for jQuery TimeDurationPicker 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.
Name
The name configuration contains the name of the time unit the specific column will hold, and supports the following values:
dayshoursminutessecondsmilliseconds
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours" } // Display the hours column in the popup.
]
});
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.
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours", format: "## hours" }
]
});
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.
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours", min: 6 }
]
});
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.
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours", min: 6, max: 12 }
]
});
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.
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours", step: 2 }
]
});