jquery ui 学习随笔 日历

一．调用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);