一.調用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, 注意選擇區的年份與月份的順序
null
null
時,沒有下限。
支持多個類型:
2
表示從今天開始的次日,(愚人碼頭注:即:後天), -1
表示昨天。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);