日历(datepicker)UI,可以让用户更加直观的、更加方便的输入日期,并且还考
虑不同国家的语言限制,包括汉语。
一.调用datepicker()方法
$('#date').datepicker();
二.修改datepicker()样式
日历UI 的header 背景和对话框UI 的背景采用的是同一个class
//无须修改ui 里的CSS,直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}
//修改当天日期的样式
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
//修改选定日期的样式
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}
三.datepicker()方法的属性
日历方法有两种形式:1.datepicker(options),options 是以对象键值对的形式
传参,每个键值对表示一个选项;2.datepicker('action', param),action 是操作
对话框方法的字符串,param则是options 的某个选项。
属性 | 默认值/类型 | 说明 |
dateFormat | mm/dd/yy/时间 | 指定日历返回的日期格式 |
dayNames | 英文日期/数组 |
以数组形式指定星期中的天的长格式。比
如:Sunday、Monday 等。中文:星期日
|
dayNamesShort | 英文日期/数组 |
以数组形式指定星期中的天的短格式。比
如:Sun、Mon 等。
|
dayNamesMin | 英文日期/数组 |
以数组形式指定星期中的天的最小格式。
比如:Su、Mo 等。
|
monthNames | 英文月份/数组 |
以数组形式指定月份的长格式名称
( January 、February 等)。数组必须从
January 开始。
|
monthNamesShort | 英文月份/数组 |
以数组形式指定月份的短格式名称(Jan、
Feb 等)。数组必须从January 开始。
|
altField | 无/字符串 | 为日期选择器指定一个<input>域 |
altFormat | 无/字符串 | 添加到<input>域的可选日期格式 |
appendText | 无/字符串 | 在日期选择器的<input>域后面附加文本 |
showWeek | false/布尔值 | 显示周 |
weekHeader | 'Wk'/字符串 | 显示周的标题 |
firstDay | 0/数值 |
指定日历中的星期从星期几开始。0 表示
星期日。
|
注意:默认情况下,日历显示为英文。如果想使用中文日历,直接引入中文语言包即可。或
者把中文语言包的几行代码整合到某个js 文件里即可。
代码 | 说明 |
d | 月份中的天,从1 到31 |
dd | 月份中的天,从01 到31 |
o | 年份中的天,从1 到366 |
oo | 年份中的天,从001 到366 |
D | 星期中的天的缩写名称(Mon、Tue 等) |
DD | 星期中的天的全写名称(Monday、Tuesday 等) |
m | 月份,从1 到12 |
mm | 月份,从01 到12 |
M | 月份的缩写名称(Jan、February 等) |
MM | 月份的全写名称(January、February 等) |
y | 两位数字的年份(14 表示2014) |
yy | 四位数字的年份(2014) |
@ | 从01/01/1997 至今的毫秒数 |
$('#date').datepicker({
dateFormat : 'yy-mm-dd',
dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort : ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
altField : '#abc',
altFormat : 'yy-mm-dd',
appendText : '(yy-mm-dd)',
firstDay : 1,
showWeek : true,
weekHeader : '周',
});
属性 | 默认值/类型 | 说明 |
disabled | false/布尔值 | 禁用日历 |
numberOfMonths | 1/数值 |
日历中同时显示的月份个数。默认为1,
如果设置3 就同时显示3 个月份。也可以
设置数组:[3,2],3 行2 列共6 个。
|
showOtherMonths | false/布尔值 |
如果设置为true,当月中没有使用的单元
格会显示填充,但无法使用。默认为false,
会隐藏无法使用的单元格。
|
selectOtherMonths | false/布尔值 |
如果设置为true,表示可以选择上个月或
下个月的日期。前提是showOtherMonths
设置为true。
|
changeMonth | false/布尔值 |
如果设置为true,显示快速选择月份的下
拉列表。
|
changeYear | false/布尔值 |
如果设置为true,显示快速选择年份的下
来列表。
|
isRTL | false/布尔值 | 是否由右向左绘制日历。 |
autoSize | false/布尔值 |
是否自动调整控件大小,以适应当前的日
期格式的输入
|
showOn | 'focus'/字符串 |
默认值为focus,获取焦点触发,还有
button 点击按钮触发和both 任一事件发
生时触发
|
buttonText | '...'/字符串 | 触发按钮上显示的文本 |
buttonImage | 无/字符串 | 图片按钮地址 |
buttonImageOnly | false/布尔值 | 设置为true 则会使图片代替按钮 |
showButtonPanel | false/布尔值 | 开启显示按钮面板 |
closeText | 'done'/字符串 | 设置关闭按钮的文本 |
currentText | 'Today'/字符串 | 设置获取今日日期的按钮文本 |
nextText | 'Next'/字符串 | 设置下一月的alt 文本 |
prevText | 'Prev'/字符串 | 设置上一月的alt 文本 |
navigationAsDateFormat | false/字符串 |
设置prev、next 和current 的文字可以是
format 的日期格式。
|
yearSuffix | 无/字符串 | 无/字符串附加在年份后面的文本 |
showMonthAfterYear | false/布尔值 | 设置为true,则将月份放置在年份之后 |
$('#date').datepicker({
disabled : true,
numberOfMonths : [3,2],
showOtherMonths : true,
selectOtherMonths : true,
changeMonth : true,
changeYear : true,
isRTL : true,
autoSize : true,
showButtonPanel: true,
closeText : '关闭',
currentText : '今天',
showMonthAfterYear: true,
});
属性 | 默认值/类型 | 说明 |
minDate |
无/对象、字符
串或数值
| 日历中可以选择的最小日期 |
maxDate |
无/对象、字符
串或数值
| 日历中可以选择的最大日期 |
defaultDate | 当天/日期 | 预设默认选定日期。没有指定,则是当天 |
yearRange | 无/日期 | 设置下拉菜单年份的区间。比如:1950:2020 |
hideIfNoPrevNext | false/布尔值 |
设置为true,如果上一月和下一月不存在,
则隐藏按钮
|
gotoCurrent | false/布尔值 |
如果为true,点击今日且回车后选择的是
当前选定的日期,而不是今日
|
$('#date').datepicker({
yearRange: '1950:2020',
minDate : -10000,
maxDate : 0, //可以用new Date(2007,1,1)
defaultDate : -1, //可以用'1m+3'
hideIfNoPrevNext : true,
gotoCurrent : false,
});
属性 | 说明 |
x | 当前日期之后的x 天(其中x 范围从1 到n)比如:1,2 |
-x | 当前日期之前的x 天(其中x 范围从1 到n)比如:-1,-2 |
xm | 当前日期之后的x 个月(其中x 范围从1 到n)比如:1m,2m |
-xm | 当前日期之前的x 个月(其中x 范围从1 到n)比如:-1m,-2m |
xw | 当前日期之后的x 周(其中x 范围从1 到n)比如:1w,2w |
-xw | 当前日期之后的x 周(其中x 范围从1 到n)比如:-1w,2w |
属性 | 默认值/类型 | 说明 |
showAnim | fadeIn/字符串 | 设置false,无效果。默认效果为:fadeIn |
duration | 300/数值 | 日历显示或消失时的持续时间,单位毫秒 |
$('#date').datepicker({
yearRange: '1950:2020',
showAnim : false,
duration : 300,
});
特效名称 | 说明 |
blind | 日历从顶部显示或消失 |
bounce | 日历断断续续地显示或消失,垂直运动 |
clip | 日历从中心垂直地显示或消失 |
slide | 日历从左边显示或消失 |
drop | 日历从左边显示或消失,有透明度变化 |
fold | 日历从左上角显示或消失 |
highlight | 日历显示或消失,伴随着透明度和背景色的变化 |
puff | 日历从中心开始缩放。显示时“收缩”,消失时“生长” |
scale | 日历从中心开始缩放。显示时“生长”,消失时“收缩” |
pulsate | 日历以闪烁形式显示或消失 |
fadeIn | 日历显示或消失时伴随透明度变化 |
四.datepicker()方法的事件
事件名 | 说明 |
beforeShow | 日历显示之前会被调用 |
beforeShowDay |
beforeShowDay(date)方法在显示日历中的每个日期时会
被调用(date 参数是一个Date 类对象)。该方法必须返回
一个数组来指定每个日期的信息:
1.该日期是否可以被选择(数组的第一项,为true 或false)
2.该日期单元格上使用的CSS 类
3.该日期单元格上显示的字符串提示信息
|
onChangeMonthYear |
onChangeMonthYear(year, month,inst)方法在日历中显示
的月份或年份改变时会被调用。或者changeMonth 或
changeYear 为true 时,下拉改变时也会触发。Year 当前
的年,month 当年的月,inst 是一个对象,可以调用一些
属性获取值
|
onClose |
onClose(dateText, inst)方法在日历被关闭的时候调用。
dateText 是当时选中的日期字符串,inst 是一个对象,可
以调用一些属性获取值
|
onSelect |
onSelect(dateText, inst)方法在选择日历的日期时被调用。
dateText 是当时选中的日期字符串,inst 是一个对象,可
以调用一些属性获取值
|
$('#date').datepicker({
beforeShow : function () {
alert('日历显示之前触发!');
},
beforeShowDay : function (date) {
if (date.getDate() == 1) {
return [false,'a','不能选择'];
} else {
return [true];
}
},
onChangeMonthYear : function (year,month,inst) {
alert(year);
},
onClose : function (dateText,inst) {
alert(dateText);
},
onSelect : function (dateText,inst) {
alert(dateText);
}
});
注意:jQuery UI 只允许使用选项中定义的事件。目前还不可以试用on()方法来管理。
方法 | 返回值 | 说明 |
datepicker('show') | jQuery 对象 | 显示日历 |
datepicker('hide') | jQuery 对象 | 隐藏日历 |
datepicker('getDate') | jQuery 对象 | 获取当前选定日历 |
datepicker('setDate',date) | jQuery 对象 | 设置当前选定日历 |
datepicker('destroy') | jQuery 对象 | 删除日历,直接阻断 |
datepicker('widget') | jQuery 对象 | 获取日历的jQuery 对象 |
datepicker('isDisabled') | jQuery 对象 | 获取日历是否禁用 |
datepicker('refresh') | jQuery 对象 | 刷新一下日历 |
datepicker('option', param) | 一般值 | 获取options 属性的值 |
datepicker('option', param,value) | jQuery 对象 | 设置options 属性的值 |
//显示日历
$('#date').datepicker('show');
//隐藏日历
$('#date').datepicker('hide');
//获取当前选定日期
alert($('#date').datepicker('getDate').getFullYear());
//设置当前选定日期
$('#date').datepicker('setDate', '2/15/2014');
//删除日历
$('#date').datepicker('destroy');
//获取日历的jQuery 对象
$('#date').datepicker('widget');
//刷新日历
$('#date').datepicker('refresh');
//获取是否禁用日历
alert($('#date').datepicker('isDisabled'));
//获取属性的值
alert($('#date').datepicker('option', 'disabled'));
//设置属性的值
$('#date').datepicker('option', 'disabled', true);