Set alloy UI timepicker timeslots

Question

I have an alloy ui timepicker in my form. I want to only display Hours in the Input Fields. But the problem is Alloy UI divides Timeslots in 30 minutes each. So thats my input fields displays same hour 2 times

A.use('aui-timepicker', function(A) {
    new A.TimePicker({
        trigger : 'input#<portlet:namespace/>endTime',
        mask : '%H',
        popover : {
            zIndex : 1011
        },
        on : {
            selectionChange : function(event) {
                console.log(event.newSelection)
            }
        }
    });
});

With Minutes & Time

• 00:00
• 00:30
• 01:00
• 01:30

Only Hours

• 00
• 00
• 01
• 01

Answer 1

Unfortunately, the AlloyUI TimePicker API docs do not document any feature to change the step between time elements besides the values attribute. The solution is to set the values attribute to the values you want. One simple way to do this is to create an array that has the values you want:

var values = [];

for (var i = 0; i < 24; i++) {
  values.push(i.toString());
}

Then just set the values attribute to the created array:

YUI().use('aui-timepicker', function(Y) {
  new Y.TimePicker({
    /* Your code here... */
    mask: '%H',
    values: values
  });
});

Here's a runnable example:

var values = [];

for (var i = 0; i < 24; i++) {
  values.push(i.toString());
}

YUI().use('aui-timepicker', function(Y) {
  new Y.TimePicker({
    mask: '%H',
    trigger: '#input',
    values: values,
    popover: {
      zIndex: 1
    }
  });
});

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<input id="input" />