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

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

In this article