jQuery Datepicker日期控制項

datepicker可以為bootstrap添加一個事件選擇控制項，適用於任何需要調用的場合，支持多種事件格式輸出（比如：dd, d, mm, m, yyyy, yy等），是製作網頁不可缺失的插件。

Requirements

• Bootstrap 2.0.4+
• jQuery 1.7.1+

線上文檔

1. Datepicker基礎使用
2. Datepicker功能定製

3. Datepicker英文文檔

4. Datepicker中文文檔
5. Datepicker項目主頁

簡單示例

1. var nowTemp =newDate();
2. var now =newDate(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0);
3. var checkin = $('#dpd1').datepicker({
4. onRender:function(date){
5. return date.valueOf()< now.valueOf()?'disabled':'';
6. }
7. }).on('changeDate',function(ev){
8. if(ev.date.valueOf()> checkout.date.valueOf()){
9. var newDate =newDate(ev.date)
10. newDate.setDate(newDate.getDate()+1);
11. checkout.setValue(newDate);
12. }
13. checkin.hide();
14. $('#dpd2')[0].focus();
15. }).data('datepicker');
16. var checkout = $('#dpd2').datepicker({
17. onRender:function(date){
18. return date.valueOf()<= checkin.date.valueOf()?'disabled':'';
19. }
20. }).on('changeDate',function(ev){
21. checkout.hide();
22. }).data('datepicker');

使用bootstrap-datepicker.js

通過JavaScript調用Datepicker：

1. $('.datepicker').datepicker()

選項

標記

1. <divclass="input-append date"id="dp3"data-date="12-02-2012"data-date-format="dd-mm-yyyy">
2. <inputclass="span2"size="16"type="text"value="12-02-2012">
3. <spanclass="add-on"><iclass="icon-th"></i></span>
4. </div>

方法

• .datepicker(options)：初始化一個DataPicker。
• .datepicker(‘show’)：顯示Datepicker。
• .datepicker(‘hide’)：隱藏Datepicker。
• .datepicker(‘place’)：更新日期選取器的相對位置的元素
• .datepicker(‘setValue’, value)：設置Datepicker新值。它可以在指定的格式或約會對象的字元串。

屬性

DatePicker支持滑鼠點選日期，同時還可以通過鍵盤控制選擇：

1. page up/down -上一月、下一月
2. ctrl+page up/down -上一年、下一年
3. ctrl+home -當前月或最後一次打開的日期
4. ctrl+left/right -上一天、下一天
5. ctrl+up/down -上一周、下一周
6. enter -確定選擇日期
7. ctrl+end-關閉並清除已選擇的日期
8. escape -關閉並取消選擇

實用功能

1. $.datepicker.setDefaults( settings )-全局設置日期選擇插件的參數.
2. $.datepicker.formatDate( format, date, settings )-格式化顯示的日期字元串
3. $.datepicker.iso8601Week( date )-給出一個日期，確實他是一年中的第幾周
4. $.datepicker.parseDate( format, value, settings )-按照指定格式獲取日期字元串

日期格式

1. d -每月的第幾天(沒有前導零)
2. dd -每月的第幾天(兩位數字)
3. o -一年中的第幾天(沒有前導零)
4. oo -一年中的第幾天(三位數字)
5. D - day name short
6. DD - day name long
7. m -月份(沒有前導零)
8. mm -月份(兩位數字)
9. M - month name short
10. MM - month name long
11. y -年份(兩位數字)
12. yy -年份(四位數字)
13. @-Unix時間戳(從01/01/1970開始)
14. '...'-文本
15. ''-單引號
16. （其它）-文本

其它標準日期格式

1. ATOM -'yy-mm-dd'(Sameas RFC 3339/ISO 8601)
2. COOKIE -'D, dd M yy'
3. ISO_8601 -'yy-mm-dd'
4. RFC_822 -'D, d M y'
5. RFC_850 -'DD, dd-M-y'
6. RFC_1036 -'D, d M y
7. RFC_1123 - 'D, d M yy'
8. RFC_2822 - 'D, d M yy'
9. RSS - 'D, d M y'
10. TIMESTAMP - '@'
11. W3C - 'yy-mm-dd'

參數（參數名 : 參數類型 : 預設值）

altField : String : '' 
  將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字元串。 

1. 初始：$('.selector').datepicker({ altField:'#actualDate'});
2. 獲取：var altField = $('.selector').datepicker('option','altField');
3. 設置：$('.selector').datepicker('option','altField','#actualDate');

altFormat : String : '' 
  當設置了altField的情況下，顯示在另一個域中的日期格式。 

1. 初始：$('.selector').datepicker({ altFormat:'yy-mm-dd'});
2. 獲取：var altFormat = $('.selector').datepicker('option','altFormat');
3. 設置：$('.selector').datepicker('option','altFormat','yy-mm-dd');

appendText : String : '' 
  在日期插件的所屬域後面添加指定的字元串。 

1. 初始：$('.selector').datepicker({ appendText:'(yyyy-mm-dd)'});
2. 獲取：var appendText = $('.selector').datepicker('option','appendText');
3. 設置：$('.selector').datepicker('option','appendText','(yyyy-mm-dd)');

buttonImage : String : '' 
  設置彈出按鈕的圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。 

1. 初始：$('.selector').datepicker({ buttonImage:'/images/datepicker.gif'});
2. 獲取：var buttonImage = $('.selector').datepicker('option','buttonImage');
3. 設置：$('.selector').datepicker('option','buttonImage','/images/datepicker.gif');

buttonImageOnly : Boolean : false 
  Set to true to place an image after the field to use as the trigger without it appearing on a button. 

1. 初始：$('.selector').datepicker({ buttonImageOnly:true});
2. 獲取：var buttonImageOnly = $('.selector').datepicker('option','buttonImageOnly');
3. 設置：$('.selector').datepicker('option','buttonImageOnly',true);

buttonText : String : '...' 
  設置觸發按鈕的文本內容。 

1. 初始：$('.selector').datepicker({ buttonText:'Choose'});
2. 獲取：var buttonText = $('.selector').datepicker('option','buttonText');
3. 設置：$('.selector').datepicker('option','buttonText','Choose');

changeMonth : Boolean : false 
  設置允許通過下拉框列表選取月份。 

1. 初始：$('.selector').datepicker({ changeMonth:true});
2. 獲取：var changeMonth = $('.selector').datepicker('option','changeMonth');
3. 設置：$('.selector').datepicker('option','changeMonth',true);

changeYear : Boolean : false 
  設置允許通過下拉框列表選取年份。 

1. 初始：$('.selector').datepicker({ changeYear:true});
2. 獲取：var changeYear = $('.selector').datepicker('option','changeYear');
3. 設置：$('.selector').datepicker('option','changeYear',true);

closeTextType: StringDefault: 'Done' 
  設置關閉按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。 

1. 初始：$('.selector').datepicker({ closeText:'X'});
2. 獲取：var closeText = $('.selector').datepicker('option','closeText');
3. 設置：$(