Getting Started with the TimeDurationPicker
This guide demonstrates how to get up and running with the Kendo UI for jQuery TimeDurationPicker.
After the completion of this guide, you will be able to achieve the following end result:
<input id="timedurationpicker" />
<script>
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours", format: "## hours", min: 8, max: 11 },
{ name: "minutes", format: "## minutes", min: 15, max: 45, step: 5 },
{ name: "seconds", format: "## seconds", min: 10, max: 50, step: 10 }
],
separator: " || "
});
</script>
1. Create an input Element
First, create an <input> element on the page that will be used to initialize the component.
<input id="timedurationpicker" />
2. Initialize the TimeDurationPicker
In this step, you will initialize the TimeDurationPicker from the <input> element.
<input id="timedurationpicker" />
<script>
// Target the input element by using jQuery and then call the kendoTimeDurationPicker() method.
$("#timedurationpicker").kendoTimeDurationPicker({
});
</script>
3. Configure the Columns
Now, you will set the columns configuration, which:
- Is a fundamental and mandatory setting for the TimeDurationPicker—the component will not work without it.
- Allows you to specify which time portion columns will be visible when the drop-down is expanded.
- Enables you to specify a
format,minandmaxallowed values, andstepfor each individual column.
<input id="timedurationpicker" />
<script>
$("#timedurationpicker").kendoTimeDurationPicker({
columns: [
{ name: "hours", format: "## hours", min: 8, max: 11 },
{ name: "minutes", format: "## minutes", min: 15, max: 45, step: 5 },
{ name: "seconds", format: "## seconds", min: 10, max: 50, step: 10 }
]
});
</script>
4. Configure the Separator
The TimeDurationPicker enables you to specify your own separator that will be used to divide the individual time portions such as hours, minutes, and seconds.
<input id="timedurationpicker" />
<script>
$("#timedurationpicker").kendoTimeDurationPicker({
separator: " || ",
columns: [
{ name: "hours", format: "## hours", min: 8, max: 11 },
{ name: "minutes", format: "## minutes", min: 15, max: 45, step: 5 },
{ name: "seconds", format: "## seconds", min: 10, max: 50, step: 10 }
]
});
</script>