How to set Kendo UI TimePicker interval dynamically?

Question

I have a dropdown displays time interval 5,10,15 when i change dropdown ,timepicker interval need to set dynamically Thanks in Advance.

Answer 1

Whenever a new value is selected in the dropdown menu, you should use the method setOptions of the time picker. Something like:

var tp = $("#timepicker").data("kendoTimePicker");
$("#intervals").kendoDropDownList({
    change: function(e) {
        tp.setOptions({interval: this.value()});
    }
}

Check the following code snippet.

// create TimePicker from input HTML element
var tp = $("#timepicker").kendoTimePicker({
  dateInput: true
}).data("kendoTimePicker");

// Intercept change on Dropdown
$("#intervals").kendoDropDownList({
  change: function(e) {
    // Set new time interval
    tp.setOptions({
      interval: this.value()
    });
  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>

<input id="timepicker" value="10:00 AM" title="timepicker" style="width: 100%;" />
<select id="intervals">
  <option>5</option>
  <option>10</option>
  <option>15</option>
</select>