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