您的位置：首页 > Web前端 > JQuery

jquery datepicker日历控件

2014-12-10 22:26 465 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航