8.jQuery UI 日历UI

   日历（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 的某个选项。

datepicker 国际化选项

属性	默认值/类型	说明
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 : '周',

});

datepicker 外观选项

属性	默认值/类型	说明
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,

});

datepicker 日期选择选项

属性	默认值/类型	说明
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

datepicker 视觉选项

属性	默认值/类型	说明
showAnim	fadeIn/字符串	设置false，无效果。默认效果为：fadeIn
duration	300/数值	日历显示或消失时的持续时间，单位毫秒

$('#date').datepicker({

   yearRange: '1950:2020',

   showAnim : false,

   duration : 300,

});

datepicker 可选特效

特效名称	说明
blind	日历从顶部显示或消失
bounce	日历断断续续地显示或消失，垂直运动
clip	日历从中心垂直地显示或消失
slide	日历从左边显示或消失
drop	日历从左边显示或消失，有透明度变化
fold	日历从左上角显示或消失
highlight	日历显示或消失，伴随着透明度和背景色的变化
puff	日历从中心开始缩放。显示时“收缩”，消失时“生长”
scale	日历从中心开始缩放。显示时“生长”，消失时“收缩”
pulsate	日历以闪烁形式显示或消失
fadeIn	日历显示或消失时伴随透明度变化

四．datepicker()方法的事件

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('action', param)方法

方法	返回值	说明
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);