解決 jQuery UI datepicker z-index默認為1 的問題

最近碰到頁面日期選擇控件被頁頭擋住的問題，我們這個客戶的電腦是寬屏的，上下窄，屏幕又小，導致他點擊日期選擇控件時，無法選擇到月份。如圖：

分析造成這個問題的原因：

我們頁頭部分的z-index設置為11，定位部分（公文流轉>收文登記）和主標題部分（收文登記）的z-index都是設置為10，內容部分的z-index設置為9；發現JQuery UI 內置彈出的日期選擇框的z-index值是：$(input).zIndex() + 1，所以z-index等於10，導致日期選擇框被頁頭擋住。

分析后，整體公司UI框架的z-index體系不適合調整，因為還設計到其他模塊，比如右上角我們做了一個彈出菜單框，給用戶幫助、修改密碼、退出，如果嘗試把頁頭部分的z-index設置為10，但是接着就會發現彈出框被擋住。

所以，我們還是決定修改日期選擇框的z-index。

【方法1】：（修改JQuery UI.CSS樣式文件）整個系統中所有的時間選擇控件都可以統一調整，也是我們最終選取的方法

找到jquery-ui.css文件，找到 ui-datepicker，在其中加入 z-index:21 !important   （如果需要數值可以更大，很多人設置為9999，不是太建議，說不定以后還有比日期選擇控件層級更高的）；別忘了同時修改jquery-ui.min.css文件，最終使用的還是這個min.css文件。

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
    z-index:21 !important   /*解決日期選擇控件被擋住的問題*/ 
}

【方法2】：在使用datepicker控件頁面的JS中控制其樣式，但這種方法只適合於單一頁面，其他頁面不受影響，如果頁面多的大系統，這么做比較繁瑣（方法3也是一樣）

<p>日期：<input type="text" id="mydatepicker" style="position: relative;"></p>

    $("#mydatepicker").datepicker({
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
        dateFormat: 'yy-mm-dd',
        beforeShow: function () {
            setTimeout(
            function () {
                $('#ui-datepicker-div').css("z-index", 21);
            }, 100
            );
        }
    });

【方法3】

    $('#mytimepicker').datetimepicker({ 
        beforeShow:function(input) { 
            $(input).css({ 
                "position": "relative", 
                "z-index": 999999 
            }); 
        } 
    });