liferay - 设置合金UI时间选择器时间段

Question

我的表单中有一个合金 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除了 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" />