New to Kendo UI for jQuery? Start a free 30-day trial

Columns

configuration

The configuration of the picker columns. An array of JavaScript objects or strings. JavaScript objects are interpreted as column configurations. Strings are interpreted as the a predifined column with defaulted values for the particular time unit.

columns

Array

<input id="timedurationpicker" />
<script>
    $("#timedurationpicker").kendoTimeDurationPicker({
        columns: [ "hours", "minutes" ]
    })
</script>

columns.format

String

The format that will be used to display the column value in the input. The amount of # symbols should be equal to the largest amount of digits that the time unit can hold.

<input id="timedurationpicker" />
<script>
    $("#timedurationpicker").kendoTimeDurationPicker({
        columns: [ { name: "hours", format: "## hh" }, "minutes" ]
    })
</script>

columns.max

Number

Sets the maximum time unit value.

<input id="timedurationpicker" />
<script>
    $("#timedurationpicker").kendoTimeDurationPicker({
        columns: [ { name: "hours", max : 12 }, "minutes" ]
    })
</script>

columns.min

Number

Sets the minimum time unit value.

<input id="timedurationpicker" />
<script>
    $("#timedurationpicker").kendoTimeDurationPicker({
        columns: [ { name: "hours", min : 12 }, "minutes" ]
    })
</script>

columns.name

String

Specifies the name of the time unit the column will hold. Can be set to the following values:

"days"
"hours"
"minutes"
"seconds"
"milliseconds"

<input id="timedurationpicker" />
<script>
    $("#timedurationpicker").kendoTimeDurationPicker({
        columns: [ { name: "hours", min : 12 }, "minutes" ]
    })
</script>

columns.step

Number

Specifies the value used to increment or decrement the column value

<input id="timedurationpicker" />
<script>
    $("#timedurationpicker").kendoTimeDurationPicker({
        columns: [ { name: "hours", step : 2 }, "minutes" ]
    })
</script>