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);