JQuery插件：日历UI----datepicker

一、调用datepicker的方法
$('#date').datepicker();
二、修改datepicker()的样式

注：日历UI的header背景和对话框UI的背景采用的是同一个class，若一个地方有做修改，另一个地方则无需做修改

//无需修改UI里的CSS，直接用style.css代替即可 .ui-widget-header{ 　　background:url('images/1.jpg'); } //修改当天日期样式 .ui-datepicker-today .ui-state-highlight{ 　　border:#EEE solid 1px; 　　color:#EEE; } //修改选定日期的样式 .ui-datepicker-current-day .ui-state-active{ 　　border:#EEE solid 1px; 　　color:#EEE; }
三、datepicker()方法的属性

日历方法有两种形式：
　　1、datepicker(options)，options是以对象键值对的形式传参，每个键值对表示一个选项
　　2、datepicker('action',param)；action是操作对话框方法的字串，param
则是options的某个选项
注：datepicker的国际化选项事实上是更改日历上显示的语言，默认情况下，日历显示的语言为英文，引入中文语言包或者把中文语言包的几行代码整合到某个js文件中即可，在UI文件夹中的i18n就是datepicker的语言包，可以直接把中文那个文件引入或者打开那个文件，将其中的几行代码整合到js文件(jquery.ui.js)中即可（为了减少文件的引入，推荐采用后者）
注：若出现乱码，只需改编码方式即可

datepicker的国际化选项.png

注：有些长格式显示不了，是因为显示地方有限，所以不推荐用

国际化选项示例.png datepicker外观选项.png datepicker外观选项续.png datepicker日期选择选项.png datepicker日期选择选项续.png

注：maxDate和minDate只是限制日期，而年份的限制的优先级没有yearRange高
日期的限制优先级，minDate和maxDate最高
设置生日时，只需要maxDate和yearRange配合使用即可

选择日期字符串表示方法.png datepicker视觉选项.png datepicker视觉选项示例.png datepicker可选特效.png datepicker可选特效续.png datepicker事件选项.png

datepicker事件选项中beforeShowDay事件的示例：

beforeShowDay : function(date){ //该事件用于做一些灵活的判断和筛选 　　if(date.getDate()==1){ //如果当前选定的日期是1号的话，该日期不可以被选择 　　　　return [false]; //因为要求是返回数组形式，所以这里如是，后面还可以有两个元素，分别是css和提示 　　｝else{ 　　　　return [true]; 　　｝ }

datepicker事件选项中onChangeMonthYear事件的示例：

onChangeMonthYear ： function(year,month,inst){ 　　alert('日历中年份或月份改变时激活！'); 　　alert(year); 　　alert(month); 　　alert(inst.id); //此处的inst是一个jquery对象，可用jquery的each方法，遍历出其所有的属性 }

这是datepicker外部写的方法，内部的主要做一些初始化工作

datepicker('action',param)方法.png

datepicker('action',param)方法的示例：

$('#date').datepicker('getDate'); //得到当前选定的日期 $('#date').datepicker('getDate').getFullYear(); //得到当前选定的日期的年份，后面使用js操作日期的方法来获得的年份 $('#date').datepicker('setDate','2013-2-1');

刚开始在简书上面写笔记，不好勿怪~