碼上快樂

相關內容    簡體    繁體

jQuery Datepicker日期控件

本文轉載自   查看原文   2016-12-21 08:47   5238 

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

datepicker

Requirements

在線文檔

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

  3. Datepicker英文文檔

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

簡單示例

datepickesr

  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()
復制

選項

Name type default description
format string ‘mm/dd/yyyy’ the date format, combination of d, dd, m, mm, yy, yyy.
weekStart integer 0 day of the week start. 0 for Sunday – 6 for Saturday
viewMode string|integer 0 = ‘days’ set the start view mode. Accepts: ‘days’, ‘months’, ‘years’, 0 for days, 1 for months and 2 for years
minViewMode string|integer 0 = ‘days’ set a limit for view mode. Accepts: ‘days’, ‘months’, ‘years’, 0 for days, 1 for months and 2 for years

標記

  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. 設置：$('.selector').datepicker('option','closeText','X');
復制

constrainInput : Boolean : true 
  如果設置為true，則約束當前輸入的日期格式。 

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

currentText : String : 'Today' 
  設置當天按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。 

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

dateFormat : String : 'mm/dd/yy' 
  設置日期字符串的顯示格式。 

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

dayNames : Array : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 
  設置一星期中每天的名稱，從星期天開始。此內容用於dateFormat時顯示，以及日歷中當鼠標移至行頭時顯示。 

  1. 初始：$('.selector').datepicker({ dayNames:['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi']});
  2. 獲取：var dayNames = $('.selector').datepicker('option','dayNames');
  3. 設置：$('.selector').datepicker('option','dayNames',['Dimanche',
  4. 'Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi']);
復制

dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] 
  設置一星期中每天的縮語，從星期天開始，此內容用於dateFormat時顯示，以前日歷中的行頭顯示。 

  1. 初始：$('.selector').datepicker({ dayNamesMin:['Di','Lu','Ma','Me','Je','Ve','Sa']});
  2. 獲取：var dayNamesMin = $('.selector').datepicker('option','dayNamesMin');
  3. 設置：$('.selector').datepicker('option','dayNamesMin',['Di','Lu','Ma','Me','Je','Ve','Sa']);
復制

dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 
  設置一星期中每天的縮語，從星期天開始，此內容用於dateFormat時顯示，以前日歷中的行頭顯示。 

  1. 初始：$('.selector').datepicker({ dayNamesShort:['Dim','Lun','Mar','Mer','Jeu','Ven','Sam']});
  2. 獲取：var dayNamesShort = $('.selector').datepicker('option','dayNamesShort');
  3. 設置：$('.selector').datepicker('option','dayNamesShort',['Dim','Lun','Mar','Mer','Jeu','Ven','Sam']);
復制

defaultDate : Date, Number, String : null 
  設置默認加載完后第一次顯示時選中的日期。可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 

  1. 初始：$('.selector').datepicker({ defaultDate:+7});
  2. 獲取：var defaultDate = $('.selector').datepicker('option','defaultDate');
  3. 設置：$('.selector').datepicker('option','defaultDate',+7);
復制

duration : String, Number : 'normal' 
  設置日期控件展開動畫的顯示時間，可選是"slow", "normal", "fast"，''代表立刻，數字代表毫秒數。 

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

firstDay : Number : 0 
  設置一周中的第一天。星期天為0，星期一為1，以此類推。 

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

gotoCurrent : Boolean : false 
  如果設置為true，則點擊當天按鈕時，將移至當前已選中的日期，而不是今天。 

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

hideIfNoPrevNext : Boolean : false 
  設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用） 

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

isRTL : Boolean : false 
  如果設置為true，則所有文字是從右自左。 

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

maxDate : Date, Number, String : null 
  設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 

  1. 初始：$('.selector').datepicker({ maxDate:'+1m +1w'});
  2. 獲取：var maxDate = $('.selector').datepicker('option','maxDate');
  3. 設置：$('.selector').datepicker('option','maxDate','+1m +1w');
  4. $('.selector').datepicker('option','maxDate','12/25/2012');
復制

minDate : Date, Number, String : null 
  設置一個最小的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 
 

  1. 初始：$('.selector').datepicker({ minDate:newDate(2007,1-1,1)});
  2. 獲取：var minDate = $('.selector').datepicker('option','minDate');
  3. 設置：$('.selector').datepicker('option','minDate',newDate(2007,1-1,1));
  4. $('.selector').datepicker('option','minDate','12/25/2012');
復制

monthNames : Array : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] 
  設置所有月份的名稱。 
 

  1. 初始：$('.selector').datepicker(｛monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']});
  2. 獲取：var monthNames = $('.selector').datepicker('option','monthNames');
  3. 設置：$('.selector').datepicker('option','monthNames',
  4. ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']);
復制

monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
  設置所有月份的縮寫。 
 

  1. 初始：$('.selector').datepicker(｛monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']});
  2. 獲取：var monthNamesShort = $('.selector').datepicker('option','monthNamesShort');
  3. 設置：$('.selector').datepicker('option','monthNamesShort',
  4. ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);
復制

navigationAsDateFormat : Boolean : false 
  如果設置為true，則formatDate函數將應用到 prevText,nextText和currentText的值中顯示，例如顯示為月份名稱。 
 

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

nextText : String : 'Next' 
  設置“下個月”鏈接的顯示文字。 
 

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

numberOfMonths : Number, Array : 1 
  設置一次要顯示多少個月份。如果為整數則是顯示月份的數量，如果是數組，則是顯示的行與列的數量。 
 

  1. 初始：$('.selector').datepicker({ numberOfMonths:[2,3]});
  2. 獲取：var numberOfMonths = $('.selector').datepicker('option','numberOfMonths');
  3. 設置：$('.selector').datepicker('option','numberOfMonths',[2,3]);
復制

prevText : String : 'Prev' 
  設置“上個月”鏈接的顯示文字。 
 

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

shortYearCutoff : String, Number : '+10' 
  設置截止年份的值。如果是（0-99）的數字則以當前年份開始算起，如果為字符串，則相應的轉為數字后再與當前年份相加。當超過截止年份時，則被認為是上個世紀。 
 

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

showAnim : String : 'show' 
  設置顯示、隱藏日期插件的動畫的名稱。

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

showButtonPanel : Boolean : false 
  設置是否在面板上顯示相關的按鈕。

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

showCurrentAtPos : Number : 0 
  設置當多月份顯示的情況下，當前月份顯示的位置。自頂部/左邊開始第x位。

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

showMonthAfterYear : Boolean : false 
  是否在面板的頭部年份后面顯示月份。

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

showOn : String : 'focus' 
  設置什么事件觸發顯示日期插件的面板，可選值：focus, button, both

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

showOptions : Options : {} 
  如果使用showAnim來顯示動畫效果的話，可以通過此參數來增加一些附加的參數設置。

  1. 初始：$('.selector').datepicker({ showOptions:{direction:'up'});
  2. 獲取：var showOptions = $('.selector').datepicker('option','showOptions');
  3. 設置：$('.selector').datepicker('option','showOptions',{direction:'up');
復制

showOtherMonths : Boolean : false 
  是否在當前面板顯示上、下兩個月的一些日期數（不可選）。

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

stepMonths : Number : 1 
  當點擊上/下一月時，一次翻幾個月。

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

yearRange : String : '-10:+10' 
  控制年份的下拉列表中顯示的年份數量，可以是相對當前年(-nn:+nn)，也可以是絕對值 (-nnnn:+nnnn)

  1. 初始：$('.selector').datepicker({ yearRange:'2000:2010'});
  2. 獲取：var yearRange = $('.selector').datepicker('option','yearRange');
  3. 設置：$('.selector').datepicker('option','yearRange','2000:2010');
    復制

事件

beforeShow : function(input) 
  在日期控件顯示面板之前，觸發此事件，並返回當前觸發事件的控件的實例對象。

  1. 初始：$('.selector').datepicker({ beforeShow:function(input){...}});
    復制

beforeShowDay : function(date) 
  在日期控件顯示面板之前，每個面板上的日期綁定時都觸發此事件，參數為觸發事件的日期。調用函數后，必須返回一個數組：[0]此日期是否可選(true/false)，[1]此日期的CSS樣式名稱(""表示默認)，[2]當鼠標移至上面出現一段提示的內容。

  1. 初始：$('.selector').datepicker({ beforeShowDay:function(date){...}});
    復制

onChangeMonthYear : function(year, month, inst) 
  當年份或月份改變時觸發此事件，參數為改變后的年份月份和當前日期插件的實例。

  1. 初始：$('.selector').datepicker({ onChangeMonthYear:function(year, month, inst){...}});
    復制

onClose : function(dateText, inst) 
  當日期面板關閉后觸發此事件（無論是否有選擇日期），參數為選擇的日期和當前日期插件的實例。

  1. 初始：$('.selector').datepicker({ onClose:function(dateText, inst){...}});
    復制

onSelect : function(dateText, inst) 
  當在日期面板選中一個日期后觸發此事件，參數為選擇的日期和當前日期插件的實例。

  1. $('.selector').datepicker({ onSelect:function(dateText, inst){...}});
    復制

方法：

destory 
  從元素中移除拖拽功能。 
  用法：.datepicker( 'destroy' ) 

disable 
  禁用元素的拖拽功能。 
  用法：.datepicker( 'disable' ) 

enable 
  啟用元素的拖拽功能。 
  用法：.datepicker( 'enable' ) 

option 
  獲取或設置元素的參數。 
  用法：.datepicker( 'option' , optionName , [value] ) 

dialog 
  在dialog插件中打開一個日期插件。 
  用法：.datepicker( 'dialog' , dateText , [onSelect] , [settings] , [pos] ) 

isDisabled 
  確實日期插件是否已被禁用。 
  用法：.datepicker( 'isDisabled' ) 

hide 
  隱藏（關閉）之前已經打開的日期面板。 
  用法：.datepicker( 'hide' , [speed] )  

show 
.datepicker( 'show' ) 
  顯示日期插件。 
  用法：.datepicker( 'show' ) 

getDate 
  返回當前日期插件選擇的日期。 
  用法：.datepicker( 'getDate' ) 

setDate 
  設置日期插件當前的日期。date參數可以是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')，null表示當天。 
  用法：.datepicker( 'setDate' , date )

事件

datepicker類公開了一些事件處理日期。

Event Description
show This event fires immediately when the date picker is displayed.
hide This event is fired immediately when the date picker is hidden.
changeDate This event is fired when the date is changed.
onRender This event is fired when a day is rendered inside the datepicker. Should return a string. Return ‘disabled’ to disable the day from being selected.
  1. $('#dp5').datepicker()
  2. .on('changeDate',function(ev){
  3. if(ev.date.valueOf()< startDate.valueOf()){
  4. ....
  5. }
  6. });
    復制

Data API

As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript. For most datepickers, simply set data-provide="datepicker" on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion. For inline datepickers, use data-provide="datepicker-inline"; these will be immediately initialized on page load, and cannot be lazily loaded.

  1. <inputdata-provide="datepicker">
  2. 復制

You can disable datepicker’s data-api in the same way as you would disable other bootstrap plugins:

  1. $(document).off('.datepicker.data-api');
  2. 復制

Configuration

Options are passed to the datepicker function via an options hash at instantiation:

  1. $('.datepicker').datepicker({
  2. format:'mm/dd/yyyy',
  3. startDate:'-3d'
  4. })
  5. 復制

Most options may be provided as data-attributes on the target element:

  1. <inputclass="datepicker"data-date-format="mm/dd/yyyy">
  2. 復制
  1. $('.datepicker').datepicker({
  2. startDate:'-3d'
  3. })
  4. 復制

Defaults for all options can be modified directly by changing values in the $.fn.datepicker.defaults hash:

  1. $.fn.datepicker.defaults.format ="mm/dd/yyyy";
  2. $('.datepicker').datepicker({
  3. startDate:'-3d'
  4. })
  5. 復制

No Conflict mode

$.fn.datepicker.noConflict provides a way to avoid conflict with other jQuery datepicker plugins:

  1. var datepicker = $.fn.datepicker.noConflict();// return $.fn.datepicker to previously assigned value
  2. $.fn.bootstrapDP = datepicker;// give $().bootstrapDP the


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jquery datepicker-強大的日期控件 用js為Jquery datepicker日期控件賦值 android 日期控件 DatePicker 日期控件datepicker的使用 jquery 日期插件datePicker使用 jQuery里面的datepicker日期控件默認是顯示英文的，如何顯示中文或其他語言呢？ 日期控件My97DatePicker詳解 My97DatePicker日期控件的使用 JAVA Swing日期選擇控件datepicker的使用 日期控件 DatePicker 在ie8不能用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM