Set interval in kendo-timepicker

Question

I use kendo-timepicker with angular 5. I need to set the time interval dynamically based on the value chosen in the drop down. By default, interval is set to 1 minute.

If I select 15 minutes in the drop down, then kendo-timepicker interval should be like 15,30,45

Answer 1

You can change the interval of the of the kendo-timepicker component by utilizing the steps input. (Docs)

The steps input allows you to customize the steps for

• the hour value
• the minute value
• the second value

by assigning an object.

Example

<kendo-timepicker
    [steps]="{ hour: 1, minute: 15, second: 15}">
</kendo-timerpicker>

It's also possible to change the interval of e.g. the minute value by linking it to a variable. (Demo)

Answer 2

After trying examples from different sources. This is how I solved it. using [steps] in kendo-timepicker

  <kendo-timepicker name="time" [steps]="interval" [value]="time"></kendo-timepicker>

in component.ts

 public interval: any = { hour: 1, minute: 15};