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 的某個選項。css

注意:默認狀況下,日曆顯示爲英文。若是你想使用中文日曆,直接引入中文語言包便可。或者把中文語言包的幾行代碼整合到某個js 文件裏便可。jquery

 

$('#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個日曆api

showOtherMonths:true,app

selectOtherMonths:true,,以前暗着不能選的就能夠選擇了ide

changeMonth:true,,能夠快速選擇月份/changeYear  同理,快速選擇年份ui

isRTL:true,   星期的順序反過來url

autoSize:true,  使用這個屬性以前須要清空input樣式,生日的input框的大小本應該與上面的同樣大,不然就是與日期存放的大小同樣spa

$('#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'值點擊兩邊均可以顯示日曆3d

 showButtonPanel:true,開啓顯示面板,今天的日期以及關閉按鈕code

      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);
相關文章
相關標籤/搜索