设置 alloy UI timepicker 时隙

Question

我的表单中有一个 alloy ui 时间选择器。我只想在输入字段中显示小时数。 但问题是 Alloy UI 将时间段划分为每个 30 分钟。 所以我的输入字段显示相同的小时 2 次

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)
            }
        }
    });
});

有分钟和时间

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

仅小时

• 00
• 00
• 01
• 01

Answer 1

可惜了AlloyUI TimePicker API docs do not document any feature to change the step between time elements besides the values attribute。解决方案是将 values 属性设置为您想要的值。一种简单的方法是创建一个包含所需值的数组：

var values = [];

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

然后只需将 values 属性设置为创建的数组即可：

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

这是一个可运行的例子：

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" />