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 回答也跟上面一样。