如何更改 Liferay Portlet 6.2 中 aui-datepicker 的 zIndex 属性

Question

我发现 LF 6.2 中 portlet 中的日期字段存在一个问题。

问题是单击输入字段后，日期选择器正在显示，但 zIndex=0，这意味着它在 portlet 下。

如果我将 firebug 该参数更改为 1，一切正常。

我试过将 zIndex 添加到 YUI 代码中，但还没有成功。如何更改 DatePicker 的 zIndex？

我的代码如下：

 <i id="icon" class="icon-calendar icon-1x"></i>
<input id="date" type="text" />

<aui:script>

YUI().use('aui-datepicker', function (Y) {

    var datePicker = new Y.DatePicker({
        trigger: '#date',
        zIndex: 100
    });

    Y.one('#icon').on('click', function(event) {
        // Cannot do datePicker.show(); because of https://issues.liferay.com/browse/AUI-1795
        var date = document.getElementById('date');
        date.focus();
        date.click();
    });
});


</aui:script>

以上代码生成如下html:

    <div id="yui_patched_v3_11_0_2_1434399332971_43" class="datepicker-popover yui3-widget popover yui3-widget-positioned yui3-widget-modal yui3-widget-stacked bottom" style="left: 79px; top: 419px; display: block; z-index: 0;">

Answer 1

您需要更改 DatePicker 内部 Popover 上的 zIndex:

new Y.DatePicker({
    // ...   
    popover: {
        zIndex: 1
    }
});

有关详细信息，请参阅 example page and API docs。

如何更改 Liferay Portlet 6.2 中 aui-datepicker 的 zIndex 属性

How can I change the zIndex attribute of aui-datepicker in Liferay Portlet 6.2

z-index

datepicker

liferay

alloy-ui

liferay-aui