JQUERY ui datepicker整理（全）
阿新 • • 發佈：2019-01-22
網上搜索datepicker都不是很全面，決定自己整理下方便大家！
//兩種使用形式
$(selector,context).datepicker(options);
$(selector,context).datepicker('action',params);
$('#date').datepicker(); 載入日曆控制元件
| 說明 | 描述 |
|---|---|
| 載入日曆控制元件 | $('#date').datepicker(); |
| 移除 | $('#date').datepicker('destroy'); |
| 禁用 | $('#date').datepicker('disable'); ，注意是disable 不是disabled $('#date').datepicker('enable'); 解除禁用 |
| 日曆中文 | $.datepicker.regional["zh-CN"] = { closeText: "關閉", prevText: "<上月", nextText: "下月>", currentText: "今天", monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], dayNamesShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"], dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"], weekHeader: "周", dateFormat: "yy-mm-dd", firstDay: 1, isRTL: !1, showMonthAfterYear: !0, yearSuffix: "年" }$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);dayNames:天的長格式名稱 dayNamesShort:天的短格式名稱 dayNamesMin:天的小格式名稱 monthNames:月的長格式名稱 monthNamesShort:月的小格式名稱 |
|
日期格式 |
$('#date').datepicker({'dateFormat':'yy-mm-dd'}); 2016-08-02 預設08/09/2016 mm/dd/yy(詳見下表) |
| 全域性 | $.datepicker.setDefaults( settings ) - 全域性設定日期選擇外掛的引數.$.datepicker.formatDate( format, date, settings ) - 格式化顯示的日期字串$.datepicker.iso8601Week( date ) - 給出一個日期，確實他是一年中的第幾周$.datepicker.parseDate( format, value, settings ) - 按照指定格式獲取日期字串 |
| 說明 | 描述 |
|---|---|
| 顯示日曆 | 日曆顯示時會被呼叫beforeShow() |
| 滑鼠移動 | beforeShowDay(date)，顯示日曆的每個日期時會被呼叫，該方法必須返回一個數組來指定每個日期的資訊。（是否可以被選擇true/false,css 預設'',提示資訊 預設''）格式：return [false, 'css','提示資訊'];$('#date').datepicker({'beforeShowDay': $.datepicker.noWeekends }); 禁用週末 |
| 同理 | onChangeMonthYear(year.month)月份或者年份改變時候被呼叫onClose(dateText) 日曆關閉時候被呼叫onSelect(dateText) 日曆被選擇時候增加（注：JQUERY UI現在還不可以使用bind()方法管理日曆事件） |
| 其它 | datepicker('show') hide,getDate 返回選擇日期注意新增dateFormat，datepicker('setDate',date) 初始化日曆的預設日期datepicker('option',param) 獲取option中某個選項的數值datepicker('option',param,value) 更改option中某個選項的數值 |
| 簡單應用： |
//週六週日不讓選擇
$('#date').datepicker({'beforeShowDay':function(date){
var dayWeek = date.getDay(); // 0 週日 1 週一 ...
if(dayWeek == 0 || dayWeek == 6){
return false;
}else{
return true;
}
}})
//設定預選日期3w+1 三週後1天
$('#date').datepicker({'dateFormat':'dd/mm/yy'}).datepicker('setDate','3w+1')
|
| 說明 | 描述 |
|---|---|
| d | 1-31 |
| dd | 01-31 |
| o | 1-366 |
| oo | 001-366 |
| D | 星期中縮寫 |
| DD | 星期中全稱 |
| m | 1-12 |
| mm | 01-12 |
| M | 月份縮寫 |
| MM | 月份全寫 |
| Y | 年份縮寫 |
| YY | 年份全稱 |
| @ | 01/01/1970至今的毫秒數 |
| 格式 |
$('#date').datepicker({'dateFormat':'yy-mm-dd'}); 2016-08-02 預設08/09/2016 mm/dd/yy |
不常用
$('#date').datepicker({'firstDay':'1'}); 第一位載入週一 1，預設週日 0$('#date').datepicker({'numberOfMonths':3}); 顯示月份的個數，一定要是數字，'3'不行！預設值1
$('#date').datepicker({'numberOfMonths':[3,2]});
$('#date').datepicker({'showOtherMonths':true,'selectOtherMonths':true});
showOtherMonths:預設false 顯示當前視窗其它月份值。
selectOtherMonths:可以選擇上下月日期 預設false
$('#date').datepicker({'showAnim':false,'duration':1000});
showAnim預設是fadeIn特效，設定成false 不會產生fadeIn效果。
duration 特效持續時間特效showAnim：fadein blind bounce clip drop fold hightlight puff pulsate scale slide
var myDate = new Date();
$('#date').datepicker({'minDate':myDate});
最小日期 同理maxDate最大日期 defaultDate預設日期
格式：
| x | 1到n |
| -x | -1到-n |
| xm | 當前日期之後X月 |
| -xm | |
| xw | 當前日期之後x周 |