jquery datepicker日曆控件

地址：http://jqueryui.com/datepicker/

使用：$( "#datepicker" ).datepicker();

$.datepicker.setDefaults( settings ) - 全局設置日期選擇插件的參數. 
$.datepicker.formatDate( format, date, settings ) - 格式化顯示的日期字符串 
$.datepicker.iso8601Week( date ) - 給出一個日期，確實他是一年中的第幾周 
$.datepicker.parseDate( format, value, settings ) - 按照指定格式獲取日期字符串 

 

changeYear和changeMonth爲true時能夠下拉框選擇年份和月份。
設置格式：

The format for parsed and displayed dates. For a full list of the possible formats see the  formatDate function.

Code examples:

Initialize the datepicker with the dateFormat option specified:

1 2 3

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });

Get or set the dateFormat option, after initialization:

1 2 3 4 5

// Getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );   // Setter $( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );

重要方法：

beforeShowType: Function( Element input, Object inst )

Default:  null

A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.

 

onChangeMonthYearType: Function( Integer year, Integer month, Object inst )

Default:  null

Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters.  this refers to the associated input field.

 

this同beforeShow的input同樣。

datepicker的中文漢化設置：

jQuery(function($){
    $.datepicker.regional['zh-CN'] = {
        closeText: '關閉',
        prevText: '<上月',
        nextText: '下月>',
        currentText: '今天',
        monthNames: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        weekHeader: '周',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
       
        changeYear:true,
        changeMonth:true,
        showButtonPanel: true,
        minDate:'2013-01-01',
    };
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});    

 

問題：

jquery-ui datepicker的z-index 過小被覆蓋

如何置jquery-ui datepicker的z-index值的呢？

分析datepicker的源碼，發現彈出的日期選擇框的z-index值是：$(input).zIndex() + 1。繼續分析$.zIndex()函數（在jquery-ui.js文件中），發現當input的css position值爲absolute、fixed或relative時，$.zIndex()函數返回的值就是input css 的z-index值。

例如：<input type="text" name="add_date" id="add_date" style="z-index:1000;position:relative;" value="" />這樣設置時，彈出的jquery-ui datepicker日期選擇框的z-index值就設置爲1001了。

不想設置input，有沒有其餘辦法呢？

一種看似投機的辦法： 

beforeShow: function () { 
setTimeout( 
function () { 
 $('#ui-datepicker-div').css("z-index", 15); 
 }, 10 
); 

參考：http://bugs.jqueryui.com/ticket/5479#comment:4

 

在buttonPanel增長自定義button：

 $('#control-date').datepicker({
    beforeShow: function(input, ui) {
        setTimeout(function() {
            var buttonPane = $( input ).datepicker( "widget" ).find( ".ui-datepicker-buttonpane" );
            var button1 = $( "<button>", {
                text: "今天",
                click: function() {
                    var today = new Date();
                    $( input ).datepicker( "setDate", today);
                    setTimeout(function(){
                        $( input ).datepicker( 'hide');
                    },10);
                }
            });
            var button2 = $( "<button>", {
                text: "明天",
                click: function() {
                    $( input ).datepicker( "setDate", '+1d');
                    setTimeout(function(){
                        $( input ).datepicker( 'hide');
                    },10);
                }
            });
            var button3 = $( "<button>", {
                text: "本週五",
                click: function() {
                    var today=new Date();
                    var weekday=today.getDay();
                    var friday=new Date(1000*60*60*24*(5-weekday) + today.getTime());
                    $( input ).datepicker( "setDate", friday);
                    setTimeout(function(){
                        $( input ).datepicker( 'hide');
                    },10);  
                }
            });
            var button4 = $( "<button>", {
                text: "清空",
                click: function() {
                    $.datepicker._clearDate( input );
                }
            });
            if( buttonPane ) {
                buttonPane.html('');
                button1.appendTo( buttonPane ).addClass("ui-datepicker-current ui-state-default ui-priority-primary ui-corner-all ui-datepicker-button");
                button2.appendTo( buttonPane ).addClass("ui-datepicker-current ui-state-default ui-priority-primary ui-corner-all ui-datepicker-button");
                button3.appendTo( buttonPane ).addClass("ui-datepicker-current ui-state-default ui-priority-primary ui-corner-all ui-datepicker-button");
                button4.appendTo( buttonPane ).addClass("ui-state-default ui-priority-primary ui-corner-all ui-datepicker-button");
            }
        },1); //end setTimeout
    },
    showButtonPanel: true,
});

 參考：http://ifxoxo.com/jquery-datepicker-add-button.html
在stackoverflow上的http://stackoverflow.com/questions/4598850/how-do-you-add-buttons-to-a-jquery-datepicker-in-the-button-panel 回答也跟上面同樣。