jquery datetimepicker 配置參數

各位小編:轉發(fā)博客內容可以童社,請注明出處求厕,尊重原創(chuàng)!扰楼!

jquery的datetimepicker時間控件除了樣式有點不太美觀呀癣,功能性還是相當強大的。

在正常情況下input的type應該設置為"text"弦赖,可點擊又可輸入(mask,enterLikeTab 要在type="text"時使用)十艾;我個人選擇時間時不太贊同支持輸入,如果輸入會有時間格式錯誤的出現腾节;所以這里我就把input的type應該設置為"button",只可點擊不可輸入。參考:http://xdsoft.net/jqplugins/datetimepicker/


使用方法:

添加jquery.min.js荤牍、datetimepicker.main.js和datetimepicker.css到您的頁面

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.main.js"></script>
<script src="jquery.datetimepicker.main.js"></script>

在html中:

 <input type="button" class="" id="datetimepicker"  value="請選擇時間"  />

在js中:

$('#datetimepicker').datetimepicker({
    step: 10,
    format: 'Y-m-d H:i'
});


以上只是敘述jquery datetimepicker的用法案腺;知道了它的用法,就會想知道它的配置參數有哪些康吵,代表著什么意思劈榨,這才是我們的重點。

須知:語言選擇中文晦嵌,現在lang配置已經失效;可用: $.datetimepicker.setLocale('ch');

$('#datetimepicker').datetimepicker({
     value: ''                   // 設置當前datetimepicker的值
     rtl: false,                    // false   默認顯示方式   true timepicker和datepicker位置變換
     format:    'Y/m/d H:i',     // 設置時間年月日時分的格式 如: 2016/11/15 18:00
     formatTime:    'H:i',       // 設置時間時分的格式
     formatDate:    'Y/m/d',     // 設置時間年月日的格式
     startDate: false,         // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
     step: 10,                    // 設置時間時分的間隔
     closeOnDateSelect: false,      // true 設置datepicker可點擊   false 設置datepicker不可點擊 實際上可以雙擊
     closeOnTimeSelect: true,       // true 設置timepicker可點擊   false 設置timepicker不可點擊 
     closeOnWithoutClick: true,     // true 設置點擊input可以隱藏datetimepicker   false 設置點擊input不可以隱藏datetimepicker  
     closeOnInputClick: true,      // true 設置點擊input可以隱藏datetimepicker   false 設置點擊input不可以隱藏datetimepicker  (會有閃動 先隱藏 再顯示)
     timepicker: true,            // true 顯示timepicker   false 隱藏timepicker
     datepicker: true,            // true 顯示datepicker   false 隱藏datepicker
     weeks: false,                // true 顯示周數   false 隱藏周數
     defaultTime: false,            // 如果輸入值為空 可用來設置默認顯示時間 use formatTime format (ex. '10:00' for formatTime:   'H:i') 
     defaultDate: false,            // 如果輸入值為空 可用來設置默認顯示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
     minDate: false,                // 設置datepicker最小的限制日期   如:2016/08/15
     maxDate: false,                // 設置datepicker最大的限制日期   如:2016/11/15
     minTime: false,                // 設置timepicker最小的限制時間   如:08:00
     maxTime: false,              // 設置timepicker最大的限制時間   如:18:00
     allowTimes: [],                // 設置timepicker顯示的時間   如:allowTimes:['09:00','11:00','12:00','21:00']
     opened: false,              // false默認打開datetimepicker可關閉  true打開datetimepicker后不可關閉
     initTime: true,                // 設置timepicker默認時間   如:08:00
     inline: false,             // ture設置datetimepicker一直顯示
     theme: '',                  // ture設置datetimepicker顯示樣式 如: 'dark'
     withoutCopyright: true,        // ture默認隱藏左下角'xdsoft.net'鏈接  false 顯示左下角'xdsoft.net'鏈接 
     inverseButton: false,          // false 默認   true datepicker的上一月和下一月功能互換  timepicker的上下可點擊按鈕功能互換
     hours12: false,                // true設置12小時格式  false設置24小時格式
     next: 'xdsoft_next',           // 設置datepicker上一月按鈕的樣式
     prev : 'xdsoft_prev',        // 設置datepicker下一月按鈕的樣式
     dayOfWeekStart: 0,            // 設置默認第-列為周幾 如:0 周日  1 周一
     parentID: 'body',            // 設置父級選擇器
     timeHeightInTimePicker: 25,    // 設置timepicker的行高
     timepickerScrollbar: true,  // ture設置timepicker顯示滑動條  false設置timepicker不顯示滑動條
     todayButton: true,            // ture顯示今天按鈕  false不顯示今天按鈕   位置在datepicker左上角
     prevButton: true,              // ture顯示上一月按鈕  false不顯示上一月按鈕   位置在datepicker左上角
     nextButton: true,          // ture顯示下一月按鈕  false不顯示下一月按鈕   位置在datepicker又上角
     scrollMonth: true,             // ture 設置datepicker的月份可以滑動  false設置datepicker的月份不可以滑動
     lazyInit: false,              // 翻譯: 初始化插件發(fā)生只有當用戶交互同辣。大大加速插件與大量的領域的工作
     mask: false,                  // 使用輸入掩碼拷姿。真正的-自動生成一個字段的“格式”的面具,從0到9的數字旱函,設置為值的最高可能的數字响巢。例如:第一個小時的數字不能大于2,而第一位數字不能大于5  如:{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
     validateOnBlur: true,        // 失去焦點時驗證datetime值輸入,棒妨。如果值是無效的datetime,然后插入當前日期時間值
     yearStart: 1950,              // 設置最小的年份   
     yearEnd: 2050,              // 設置最大的年份
     monthStart: 0,              // 設置最小的月份
     monthEnd: 11,                // 設置最大的月份
     roundTime: 'round',          // 設置timepicker的計算方式  round四舍五入 ceil向上取整 floor向下取整
     allowDateRe : null,            // 設置正則表達式檢查日期 如:{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
     disabledDates : [],            // 設置不可點擊的日期  如:disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
     disabledWeekDays: [],          // 設置不可點擊的星期  如:disabledWeekDays:[0,3,4]
     yearOffset: 0,              // 設置偏移年份  如:2 代表當前年份加2  -2  代表當前年份減2
     beforeShowDay: null,          // 顯示datetimepicker之前可調用的方法  {beforeShowDay:function(d) {console.log("bsd"); } }
     enterLikeTab: true,            // tab按鍵均可使datetimepicker關閉  true點擊回車鍵可使datetimepicker關閉 false點擊回車鍵不可使datetimepicker關閉 
     showApplyButton: false      // 相當于確定按鈕  true顯示  false隱藏
});


簡單敘述jquery datetimepicker的相關點擊方法


 /*
 *  監(jiān)聽時間插件顯示時的事件
 */
$('#datetimepicker').datetimepicker({
    onShow: function(dateText, inst) {
       console.log("---已打開datetimepicker----");
    }
}); 

/*
 *  監(jiān)聽時間插件關閉時的事件 
 */
$('#datetimepicker').datetimepicker({
    onClose: function(dateText, inst) {
       console.log("---已關閉datetimepicker----");
    }
}); 

/*
 *  監(jiān)聽點擊日期時的事件
 */
 
$('#datetimepicker').datetimepicker({
    onSelectDate: function(dateText, inst) {
       console.log(dateText);
    }
}); 

/*
 *  監(jiān)聽點擊時分的事件
 */
 
$('#datetimepicker').datetimepicker({
    onSelectTime: function(dateText, inst) {
       console.log(dateText);
    }
}); 

/*
 *  監(jiān)聽點擊datepicker 上一月下一月按鈕及選擇月份點擊事件   
 */
$('#datetimepicker').datetimepicker({
    onChangeMonth: function(dateText, inst) {
       console.log(dateText);
    }
});
/*
 *  監(jiān)聽獲取當前datetimepicker顯示的所有日期信息
 */
$('#datetimepicker').datetimepicker({
    onGetWeekOfYear: function(dateText, inst) {
       console.log(dateText);
    }
}); 

 /*
 *  監(jiān)聽選擇年份的點擊事件
 */
$('#datetimepicker').datetimepicker({
    onChangeYear: function(dateText, inst) {
       console.log(dateText);
    }
});
 
 /*
 *  實時監(jiān)聽你選擇的日期和時間
 */
$('#datetimepicker').datetimepicker({
    onChangeDateTime: function(dateText, inst) {
       console.log(dateText);
    }
}); 

 /*
 *  實時監(jiān)聽datetimepicker上的所有事件
 */
$('#datetimepicker').datetimepicker({
    onGenerate: function(dateText, inst) {
       console.log(dateText);
    }
}); 

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末踪古,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子券腔,更是在濱河造成了極大的恐慌伏穆,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纷纫,死亡現場離奇詭異枕扫,居然都是意外死亡,警方通過查閱死者的電腦和手機辱魁,發(fā)現死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門烟瞧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人商叹,你說我怎么就攤上這事燕刻。” “怎么了剖笙?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵卵洗,是天一觀的道長。 經常有香客問我弥咪,道長过蹂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任聚至,我火速辦了婚禮酷勺,結果婚禮上,老公的妹妹穿的比我還像新娘扳躬。我一直安慰自己脆诉,他們只是感情好,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布贷币。 她就那樣靜靜地躺著击胜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪役纹。 梳的紋絲不亂的頭發(fā)上偶摔,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機與錄音促脉,去河邊找鬼辰斋。 笑死策州,一個胖子當著我的面吹牛,可吹牛的內容都是我干的宫仗。 我是一名探鬼主播够挂,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼锰什!你這毒婦竟也來了下硕?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤汁胆,失蹤者是張志新(化名)和其女友劉穎梭姓,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體嫩码,經...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡誉尖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了铸题。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铡恕。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖丢间,靈堂內的尸體忽然破棺而出探熔,到底是詐尸還是另有隱情,我是刑警寧澤烘挫,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布诀艰,位于F島的核電站,受9級特大地震影響饮六,放射性物質發(fā)生泄漏其垄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一卤橄、第九天 我趴在偏房一處隱蔽的房頂上張望绿满。 院中可真熱鬧,春花似錦窟扑、人聲如沸喇颁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽橘霎。三九已至,卻和暖如春厂抖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背克懊。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工忱辅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留七蜘,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓墙懂,卻偏偏與公主長得像橡卤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子损搬,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內容