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

Question

I have discoveder one problem with date field in portlet in LF 6.2.

The problem is that after clicking on the input field, the datepicker is displaying, but with zIndex=0, that means it is under the portlet.

If I change on firebug that parameter to 1, everything is OK.

I have tried to add zIndex to YUI code, but no success yet. How can I change the zIndex of the DatePicker?

My code is below:

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

The above code generates the following 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

You need to change the zIndex on the DatePicker's internal Popover:

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

See the example page and API docs for more details.