一．调用datepicker()方法
$(‘#date‘).datepicker();
二．修改datepicker()样式
日历UI 的header 背景和对话框UI 的背景采用的是同一个class，所以，在此之前已经
被修改。所以，这里无须再修改了。
//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {
background:url(../img/ui_header_bg.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 的某个选项。
注意：默认情况下，日历显示为英文。如果你想使用中文日历，直接引入中文语言包即可。或者把中文语言包的几行代码整合到某个js 文件里即可。
$(‘#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 : ‘周‘,
});
numberOfMonths:[3,2], 展示6个日历
showOtherMonths:true,
selectOtherMonths:true,，之前暗着不能选的就可以选择了
changeMonth:true,，可以快速选择月份/changeYear 同理，快速选择年份
isRTL:true, 星期的顺序反过来
autoSize:true, 使用这个属性之前需要清空input样式，生日的input框的大小本应该与上面的一样大，否则就是与日期存放的大小一样
$(‘#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,
});
showOn:‘button‘, buttonText:‘日历‘, 点击日历才会弹出日历/showOn:‘both‘值点击两边都可以显示日历
showButtonPanel:true,开启显示面板，今天的日期以及关闭按钮
prevText:‘上个月mm‘,
nextText:‘下个月mm‘,
navigationAsDateFormat:true, 如果设置为false就没有显示上个月01的效果了，只有上个月mm，所以设置想要获取上个月时间需要打开navigationAsDateFormat
yearSuffix:‘年‘, 可以在年份后面添加文本
showMonthAfterYear:true, 注意选择区的年份与月份的顺序
minDate Type: Date or Number or String
Default: null
最小的可选日期。当设置为null时，没有下限。
支持多个类型：
- Date: 一个包含默认日期的date对象。
- Number: 一个和今天对比的数字。例如
2表示从今天开始的第二天，（愚人码头注：即：后天），-1表示昨天。 - String: 一个由
dateFormat选项定义格式的字符串 ， 或相对日期。 相对日期必须包含值和期间对; 有效期间为："y"表示几年，"m"表示几月，"w"表示几周，和"d"表示几天。 例如，"+1m +7d"表示从今天开始的一个月加七天。
$(‘#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()方法来管理。
//显示日历 $(‘#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);