jquery datepicker日历控件

2023-08-19 08:01:40

使用：$( "#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:

$( ".selector" ).datepicker({

dateFormat: "yy-mm-dd"

});

Get or set the dateFormat option, after initialization:

// 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
在*上的http://*.com/questions/4598850/how-do-you-add-buttons-to-a-jquery-datepicker-in-the-button-panel 回答也跟上面一样。

码农公寓

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

相关文章