Change Order and Start Time in TimePicker Options List

Environment

Product	Progress® Kendo UI® TimePicker for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I make the options on the TimePicker list start at a specific time while the TimePicker still shows the skipped ones at the end of its options list?

Solution

1. Subscribe to the open event of the TimePicker.
2. Traverse the items in the list while you use jQuery to reorder them.

<input id="timepicker" />

<script>
  $("#timepicker").kendoTimePicker({
    interval: 15,
    open: function(e) {
      var list = $("#" + e.sender.element.attr('id') + "_timeview");
      if (list.attr('fixed-time-labels') != 'true') {
        var elements = list.find('li:lt(24)');
        elements.insertAfter(list.find('li:last'));
        list.attr('fixed-time-labels', 'true');
      }
    }
  });
</script>

See Also

• API Reference of the open Event