Jquery李炎恢——44，45，46日历UI【10】【11】【12】

学习要点：
1.调用datepicker()方法
2.修改datepicker()样式
3.datepicker()方法的属性
4.datepicker()方法的事件

日历UI，可以让用户更加直观的，更加方便的输入日期，并且还考虑不同国家的语言限制，包括汉语。

一、调用datepicker()方法
$("#date").datepicker();

二、修改datepicker()样式
日历UI的header背景和对话框UI的背景采用的是同一个class，所以，在此之前已经被修改，所以，这里无须再修改了。
//无须修改ui里的css，直接用style.css替代掉

.ui-datepicker-today .ui-state-highlight{

   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,默认值/类型：无/字符串，说明：显示周
属性：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,Feb等）
代码：M,说明：月份的全写名称（January,February等）
代码：y,说明：两位数字的年份（14表示2014）
代码：yy,说明：四位数字的年份（2014）
代码：@,说明：从01/01/1997至今的毫秒数

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，默认值/类型："today"/字符串，说明：获取今日日期的按钮文本
属性：nextText，默认值/类型："next"/字符串，说明：设置下一月的alt文本
属性：prevText，默认值/类型："prev"/字符串，说明：设置上一月的alt文本
属性：navigationAsDateFormat，默认值/类型："prev"/字符串，说明：设置prev,next和current的文字可以是format的日期格式
属性：yearSuffix，默认值/类型：无/字符串，说明：附加在年份后面的文本
属性：showMonthAfterYear，默认值/类型：false/布尔值，说明：设置为true，则将月份房子在年份之后

$("#date").datepicker({

   disabled:true;

   numberOfMonth:[3,2];

   showOtherMonth: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,

});

datepicker可选特效

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

四、datepicker()方法的事件
除了属性设置外，datepicker()方法也提供了大量的事件。这些事件可以给各个不同状态时提供回调函数。这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div.

datepicker事件选项
事件名：beforeShow，说明：日历显示之前会被调用
事件名：beforeShowDay，说明：beforeShowDay(date)方法在显示日历中的每个日期时会被调用（date参数是一个Date类对象）。该方法必须返回一个数组来指定每个日期的信息：1.该日期是否可以被选择（数组的第一项，为true或false），2.该日期单元格上使用的CSS类，3.该日期单元格上显示的字符串提示信息。
事件名：onChangeMonthYear，说明：onChangeMonthYear(year,month,inst)方法在日历中显示的月份或年份改变时会被调用。或者changeMonth或changeYear为rue时，下拉改变时也会触发。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)，返回值：一般值，说明：获取option属性的值
方法：datepicker("option",param，value)，返回值：jquery对象，说明：设置option属性的值

//显示日历
$("#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);