Options/選項
帶“Date”的所有選項都可以處理 Date 對象; 字符串格式化根據 給定的 format 而定; 相對於今天的時間變量, 如 “-1d”, “+6m +1y”等等, 其中有效的單位為 “d” (day), “w” (week), “m” (month), and “y” (year). 使用“0” 表示今天. 也有一些等於時間變量的別名: “yesterday” 相當於“-1d”, “today” 等於 “+0d” ，“tomorrow” 則為 “+1d”.
大多數選項也可以用data-屬性的方式使用. 選項可以轉換為data-屬性再加上它本身的名字的方式。只需要替換選項名中每一個大寫字母為小寫，並且單詞之間加上短橫線（“-”）, 最后再加上前綴 “data-date-”. 例如, startDate 可以寫為 data-date-start-date, format則變為 data-date-format, daysOfWeekDisabled 可寫成 data-date-days-of-week-disabled.
查看 quick reference ，瀏覽所有選項以及它們的默認值。
autoclose/自動關閉
Boolean. 默認值: false
不管日期是否選中，直接關閉日期控件。
assumeNearbyYear/呈現最近年份
Boolean or Integer. 默認值: false
如果設為true, 手動輸入兩位數的年份, 比如 “5/1/15”, 將會被轉為 “2015”, 而不是 “15”. 如果年份向前提前少於10年,控件會使用當前世紀, 否則, 它將使用上個世紀. 例如 “5/1/15”表示2015年5月1日, 但是 “5/1/97” 則表示1997年5月1日.
要預先配置控件一直使用當前世紀的年數，那就使用整數而不是布爾值. 例如： “assumeNearbyYear: 20”
beforeShowDay/顯示日期前
Function(Date). 默認值: $.noop
該方法使用一個日期作為參數，返回下列值之一:
- undefined，無任何影響。
- A Boolean, 指示此日期是否可選擇
- A String 代表給日期單元格應用額外的CSS類
- 擁有下列屬性的Object:
enabled: 和上面的 Boolean值 一樣classes: 和上面的 String值一樣tooltip: 通過HTML的title屬性給日期上面加提示content: 日期單元格里面顯示的內容,而不是默認值（文本格式的月/日）
beforeShowMonth/顯示月份前
Function(Date). 默認值: $.noop
該方法使用一個日期作為參數，返回下列值之一:
- undefined，無任何影響。
- A Boolean, 指示此月份是否可選擇
- A String 代表給月份單元格應用額外的CSS類
- 擁有下列屬性的Object:
enabled: 和上面的 Boolean值 一樣classes: 和上面的 String值一樣tooltip: 通過HTML的title屬性給日期上面加提示
beforeShowYear/顯示年份前
Function(Date). 默認值: $.noop
該方法使用一個日期作為參數，返回下列值之一:
- undefined，無任何影響。
- A Boolean, 指示此年份是否可選擇
- A String 代表給年份單元格應用額外的CSS類
- 擁有下列屬性的Object:
enabled: 和上面的 Boolean值 一樣classes: 和上面的 String值一樣tooltip: 通過HTML的title屬性給年份上面加提示
beforeShowDecade/顯示年代前
Function(Date). 默認值: $.noop
該方法使用一個日期作為參數，返回下列值之一:
- undefined，無任何影響。
- A Boolean, 指示此年份是否可選擇
- A String 代表給年份單元格應用額外的CSS類
- 擁有下列屬性的Object:
enabled: 和上面的 Boolean值 一樣classes: 和上面的 String值一樣tooltip: 通過HTML的title屬性給年份上面加提示
beforeShowCentury/顯示世紀前
Function(Date). 默認值: $.noop
該方法使用一個日期作為參數，返回下列值之一:
- undefined，無任何影響。
- A Boolean, 指示此年份是否可選擇
- A String 代表給年份單元格應用額外的CSS類
- 擁有下列屬性的Object:
enabled: 和上面的 Boolean值 一樣classes: 和上面的 String值一樣tooltip: 通過HTML的title屬性給年份上面加提示
calendarWeeks/帶周的日期
Boolean. 默認值: false
是否在最左邊顯示這是當年第幾周。
clearBtn/清除按鈕
Boolean. 默認值: false
如果設為true, 在日期控件最下方顯示一個“Clear”按鈕用來清除input中的值.如果“autoclose”也設為true，那么這個按鈕也將關閉Datepicker
container/內容
String. 默認值: “body”
將日期控件的彈出加到指定元素上; 例如: container: ‘#picker-container’ (默認為 “body”)
datesDisabled/禁用日期
String, Array. 默認值: []
按照指定格式格式化一個日期字符串或者日期字符串數組。
daysOfWeekDisabled/禁用一周第幾天
String, Array. 默認值: []
一周的第幾天將被禁用.值為 0 (周日) to 6 (周六). 多個值用逗號分隔. 例如: 禁用周末: '06' 或者 '0,6' 或者 [0,6].
daysOfWeekHighlighted/一周的第幾天高亮顯示
String, Array. 默認值: []
一周的第幾天高亮顯示. 值為 0 (周日) to 6 (周六). 多個值用逗號分隔. 例如: 周末高亮: '06' 或 '0,6' 或 [0,6].
defaultViewDate/默認日期視圖
Date類型, String類型 or Object類型，關鍵字 year, month, day. 默認值: today
最初打開日歷的視圖. 控件內部使用today作為默認值, 但是當控件第一次打開是用的是 defaultViewDate而不是 today. 如果這個選項未被使用, “today” 還是作為默認日期視圖.
- 這個選項可以為:
-
- A date, 當前時區內的日期.
- A string 通過
format轉換的字符串. 一個有
year-
,
month-
,
day-
的Object.(不能由另一個數據的屬性來設置). 如果給定的對象缺少了這三個必要值的一個，那么他將使用默認值:
year: 當前年month: 0 (一月)day: 1
disableTouchKeyboard/禁用移動設備的虛擬鍵盤
Boolean. 默認值: false
如果設置為 true,在移動設備上將不出現任何鍵盤
enableOnReadonly/只讀狀態可用
Boolean. 默認值: true
如果設置為false，那么在只讀日期控件上不再顯示日歷.
endDate/結束日期（譯者注：可用最大日期）
Date or String. 默認: 計算機最大時間
最大日期可以被選中，往后的所有日期將被禁用。
必須為當前時區日期. 字符串必須符合 format 要求.
<input type="text" class="form-control" data-date-end-date="0d">
今天之后的所有日期將被禁用.
forceParse/強制轉換
Boolean. 默認值: true
在日期控件關閉時是否強制轉換input值. 當用戶輸入無效值時，控件將會強制轉換該值，並且將轉換后新的有效的符合給定format格式的值重新賦給Input元素。
format/格式化
String. 默認值: “mm/dd/yyyy”
日期格式化, 是由 d, dd, D, DD, m, mm, M, MM, yy, yyyy組成的組合.
- d, dd: 數字日期, 分別表示10號以前不帶0和帶0. 例如, 5, 05.
- D, DD: 分別代表星期名稱的簡寫和全稱。例如, Mon, Monday.
- m, mm: 數字月份，分別表示10月以前不帶0和帶0. 例如, 7, 07.
- M, MM: 分別代表月份名稱的簡寫和全稱。例如, Jan, January
- yy, yyyy: 分別代表2位和4位年份寫法. 例如, 12, 2012.
定制格式化選項：
- toDisplay: function (date, format, language) 將date對象轉為string類型, 存儲於input元素中
- toValue: function (date, format, language) 將string轉為date, 用於日期選擇
$('.datepicker').datepicker({ format: { /* * Say our UI should display a week ahead, * but textbox should store the actual date. * This is useful if we need UI to select local dates, * but store in UTC */ toDisplay: function (date, format, language) { var d = new Date(date); d.setDate(d.getDate() - 7); return d.toISOString(); }, toValue: function (date, format, language) { var d = new Date(date); d.setDate(d.getDate() + 7); return new Date(d); } } });
immediateUpdates/立即更新
Boolean. 默認值: false
如果為true, 無論選擇年或者月都將立即更新到input元素中. 否則, 只有選擇了最終日期，才更新到Input元素中.
inputs
Array, jQuery. 默認值: None
一個用於日期范圍選擇的inputs列表，它將被附加到選定的元素上。允許在非標准元素上顯式創建日期范圍選擇控件。
<div id="event_period"> <input type="text" class="actual_range"> <input type="text" class="actual_range"> </div>
$('#event_period').datepicker({ inputs: $('.actual_range') });
keepEmptyValues/保持空值
Boolean. 默認值: false
只在日期范圍選擇時起作用. 如果為 true, 選擇其中一個控件的值不會傳遞給另一個日期范圍內的控件, 當前為空, .
language/語言
String. 默認: “en”
IETF 語言代碼 (例如 “en” 代表英語, “pt-BR” 代表巴西葡萄牙語) 用於月份和日期的名稱. 這也會被用作為input元素的值 (在隨后表格提交的情況下會被發送到服務端).如果是控件支持的全稱代碼 (例如 “de-DE”) ，則控件會首先檢索一個名為 “de-DE” 的語言，如果沒有找到，則會失敗並繼續查找名為“de” 的語言. 如果給定了一個位置的語言代碼，則會使用英文顯示. 詳情查看 I18N.
maxViewMode/最大視圖模式（譯者注：最大日期選擇）
Number, String. 默認值: 4, “centuries”（世紀）
設置視圖模式的最大限制. 接受的值為: 0 或者 “days” 或者 “month”, 1 或者 “months” 或者 “year”, 2 或者 “years” 或者 “decade”, 3 或者 “decades” 或者 “century”, 4 或者 “centuries” 或者 “millenium”. 這賦予控件只選取 一天, 一個月, 一年或者一個年代的能力. 日默認為當月第一日，月默認為當年第一月，年默認為當前選擇年代的第一年，如果是世紀，則為指定世紀的第一年。
minViewMode/最小視圖模式（譯者注：最小日期選擇）
Number, String. 默認值: 0, “days”
設置視圖模式的最小限制。接受的值為: 0 或者 “days” 或者 “month”, 1 或者 “months” 或者 “year”, 2 或者 “years” 或者 “decade”, 3 或者 “decades” 或者 “century”, 4 或者 “centuries” 或者 “millenium”. 這賦予控件只選取 一天, 一個月, 一年或者一個年代的能力. 日默認為當月第一日，月默認為當年第一月，年默認為當前選擇年代的第一年，如果是世紀，則為指定世紀的第一年。
multidate/多個日期
Boolean, Number. 默認值: false
允許多個日期選擇. 每一個日期在月視圖里面都像一個切換按鈕,時刻追蹤用戶的選擇日期順序.如果給定了一個數字,控件則會按照給定的數字來限定用戶選擇日期的數量，以出棧入棧的方式用最新的日期頂掉最舊的日期 。設置為true 則相當於沒有數量限制. input元素的值（如果顯示）將會是一個由多個格式化后的日期和日期分隔符組成的字符串。
選擇兩個日期來組成一個日期范圍，請查看 date-range
multidateSeparator/多個日期分隔符
String. 默認值: ”,”
這個字符會出現在多日期選擇時的input元素的值中。當把一個Input元素的值轉換為多個日期選擇時，這個字符也會被用於分割傳入控件的值，使其變為多個格式化后的日期。特別注意，不要使用格式化字符串中已經存在的字符。 (比如, 當你使用格式為 ‘yyyy-mm-dd’的格式化字符串時，使用‘-‘ 作為分隔符).
orientation/方向
String. 默認值: “auto”
空間分離字符串考慮 “left” or “right”, “top” or “bottom”, and “auto” (可以省略)中的一個或兩個。例如, “top left”, “bottom” (水平方向默認為 “auto”), “right” (豎直方向默認為 “auto”), “auto top”.彈出日歷允許固定定位.
“方向”是指彈出日歷控件的錨點的位置。你也可以認為他是關聯到控件的出發元素的位置。
“auto” 觸發控件的 “智能方向” .水平方向默認為“left”，而向左補償會調整控件位置使得它永遠在瀏覽器的可視區域內；豎直方向則會簡單的選擇“top” 或者 “bottom”中能讓控件顯示的更好的一個 .
showOnFocus/獲取焦點時顯示
Boolean. 默認值: true
如果為false, 當input元素獲取焦點時，它所關聯的日期控件會被阻止顯示。
startDate/開始日期（譯者注：最小日期選擇）
Date or String. 默認值: 計算機最小時間
能選擇的最早的日期; 所有比這更早的日期都不可用。
日期必須為當前時區。字符串必須和格式化要求的一直。
startView/開始視圖
Number, String. 默認值: 0, “days”
日期控件打開時候顯示的視圖。接受值： 0 或 “days” 或 “month”, 1 或 “months” 或 “year”, 2 或 “years” 或 “decade”, 3 或 “decades” 或 “century”, 4 或 “centuries” 或 “millenium”. Useful for date-of-birth datepickers.
templates/模板
Object. 默認值:
{
leftArrow: '«', rightArrow: '»' }
模板用於生成控件的某些部分.每一個屬性必須是一個只有文本的字符串,或者一個有效的HTML元素.你也可以用這個屬性來使用自定義圖標庫. 例如:
{
leftArrow: '<i class="fa fa-long-arrow-left"></i>', rightArrow: '<i class="fa fa-long-arrow-right"></i>' }
showWeekDays/顯示星期
Boolean. 默認值: true
如果設為false, 控件視圖中將不再顯示星期的名字.默認行為是添加星期.
title/標題（譯者注：和HTML元素中的title屬性類似）
String. Default: “”
這個字符串會出現在日期控件的最上方。如果為空，則隱藏。
todayBtn/今日按鈕
Boolean, “linked”. 默認值: false
如果設為 true 或者 “linked”, 在日期控件最下方顯示一個 “Today” 按鈕，用來選擇當前日期。如果設為 true, “Today” 按鈕則只會將當前日期移動到試圖內; 如果是 “linked”, 當前日期則會在點擊按鈕的同時被選中.
todayHighlight/今日高亮展示
Boolean. 默認值: false
如果設為true, 當前日期會被高亮顯示。
toggleActive/切換激活狀態
Boolean. 默認值: false
如果設為true, 在控件中選中當前激活的日期將會取消選中它。這個選項在多日期選擇啟用時默認為true。
updateViewDate/更新視圖日期
Boolean. 默認值: true
如果為false，視圖日期根據初始化和更新后的值設置 * 如果下一個月的最后一天被選中 * 如果日期是由etDate, setDates, setUTCDate and setUTCDates 方法來改變。如果多日期選擇設置為true，最后一個選擇的日期或者數組中最后一個日期傳值給setDates或者setUTCDates方法啟用。（最后一句實在不知道怎么組織語言，見諒）
由於譯者水平有限，不知道此處原文中的*是什么，所以保留原文
if false,viewDate is set according to value on initialization and updated * if a day in last oder next month is selected or * if dates are changed by setDate, setDates, setUTCDate and setUTCDatesmethods. If multidate option is true the last selected date or the last date in array passed to setDates or setUTCDates is used.
weekStart/一周開始
Integer. 默認值: 0
設置星期幾為一周的起始. 0 (星期日) 到 6 (星期六)
zIndexOffset/z-index補償
Integer. Default: 10
打開的datepicker控件的z-index級別是它的input元素以及所有祖先節點的最大值再加上這個補償量。
Quick reference/快查參考
這是所有選項及其默認值的概覽。
| Option | Default value |
|---|---|
| autoclose | false |
| assumeNearbyYear | false |
| beforeShowDay | |
| beforeShowMonth | |
| beforeShowYear | |
| beforeShowDecade | |
| beforeShowCentury | |
| calendarWeeks | false |
| clearBtn | false |
| container | ‘body’ |
| datesDisabled | [] |
| daysOfWeekDisabled | [] |
| daysOfWeekHighlighted | [] |
| defaultViewDate | today |
| disableTouchKeyboard | false |
| enableOnReadonly | true |
| endDate | Infinity |
| forceParse | true |
| format | ‘mm/dd/yyyy’ |
| immediateUpdates | false |
| inputs | |
| keepEmptyValues | false |
| keyboardNavigation | true |
| language | ‘en’ |
| maxViewMode | 4 ‘centuries’ |
| minViewMode | 0 ‘days’ |
| multidate | false |
| multidateSeparator | ‘,’ |
| orientation | ‘auto’ |
| showOnFocus | true |
| startDate | -Infinity |
| startView | 0 ‘days’ (current month) |
| templates | |
| title | ‘’ |
| todayBtn | false |
| todayHighlight | true |
| toggleActive | false |
| weekStart | 0 (Sunday) |
| zIndexOffset | 10 |
轉載請注明出處：博客園-tincyho http://www.cnblogs.com/tincyho/