各位小編：轉(zhuǎn)發(fā)博客內(nèi)容可以，請注明出處，尊重原創(chuàng)！！
jquery的datetimepicker時間控件除了樣式有點不太美觀，功能性還是相當(dāng)強(qiáng)大的。
在正常情況下input的type應(yīng)該設(shè)置為"text"，可點擊又可輸入（mask,enterLikeTab 要在type="text"時使用）；我個人選擇時間時不太贊同支持輸入，如果輸入會有時間格式錯誤的出現(xiàn)；所以這里我就把input的type應(yīng)該設(shè)置為"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的用法；知道了它的用法，就會想知道它的配置參數(shù)有哪些，代表著什么意思，這才是我們的重點。
須知：語言選擇中文，現(xiàn)在lang配置已經(jīng)失效;可用: $.datetimepicker.setLocale('ch');
$('#datetimepicker').datetimepicker({
value: '' // 設(shè)置當(dāng)前datetimepicker的值
rtl: false, // false 默認(rèn)顯示方式 true timepicker和datepicker位置變換
format: 'Y/m/d H:i', // 設(shè)置時間年月日時分的格式 如: 2016/11/15 18:00
formatTime: 'H:i', // 設(shè)置時間時分的格式
formatDate: 'Y/m/d', // 設(shè)置時間年月日的格式
startDate: false, // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
step: 10, // 設(shè)置時間時分的間隔
closeOnDateSelect: false, // true 設(shè)置datepicker可點擊 false 設(shè)置datepicker不可點擊 實際上可以雙擊
closeOnTimeSelect: true, // true 設(shè)置timepicker可點擊 false 設(shè)置timepicker不可點擊
closeOnWithoutClick: true, // true 設(shè)置點擊input可以隱藏datetimepicker false 設(shè)置點擊input不可以隱藏datetimepicker
closeOnInputClick: true, // true 設(shè)置點擊input可以隱藏datetimepicker false 設(shè)置點擊input不可以隱藏datetimepicker (會有閃動 先隱藏 再顯示)
timepicker: true, // true 顯示timepicker false 隱藏timepicker
datepicker: true, // true 顯示datepicker false 隱藏datepicker
weeks: false, // true 顯示周數(shù) false 隱藏周數(shù)
defaultTime: false, // 如果輸入值為空 可用來設(shè)置默認(rèn)顯示時間 use formatTime format (ex. '10:00' for formatTime: 'H:i')
defaultDate: false, // 如果輸入值為空 可用來設(shè)置默認(rèn)顯示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
minDate: false, // 設(shè)置datepicker最小的限制日期 如：2016/08/15
maxDate: false, // 設(shè)置datepicker最大的限制日期 如：2016/11/15
minTime: false, // 設(shè)置timepicker最小的限制時間 如：08:00
maxTime: false, // 設(shè)置timepicker最大的限制時間 如：18:00
allowTimes: [], // 設(shè)置timepicker顯示的時間 如：allowTimes:['09:00','11:00','12:00','21:00']
opened: false, // false默認(rèn)打開datetimepicker可關(guān)閉 true打開datetimepicker后不可關(guān)閉
initTime: true, // 設(shè)置timepicker默認(rèn)時間 如：08:00
inline: false, // ture設(shè)置datetimepicker一直顯示
theme: '', // ture設(shè)置datetimepicker顯示樣式 如: 'dark'
withoutCopyright: true, // ture默認(rèn)隱藏左下角'xdsoft.net'鏈接 false 顯示左下角'xdsoft.net'鏈接
inverseButton: false, // false 默認(rèn) true datepicker的上一月和下一月功能互換 timepicker的上下可點擊按鈕功能互換
hours12: false, // true設(shè)置12小時格式 false設(shè)置24小時格式
next: 'xdsoft_next', // 設(shè)置datepicker上一月按鈕的樣式
prev : 'xdsoft_prev', // 設(shè)置datepicker下一月按鈕的樣式
dayOfWeekStart: 0, // 設(shè)置默認(rèn)第-列為周幾 如：0 周日 1 周一
parentID: 'body', // 設(shè)置父級選擇器
timeHeightInTimePicker: 25, // 設(shè)置timepicker的行高
timepickerScrollbar: true, // ture設(shè)置timepicker顯示滑動條 false設(shè)置timepicker不顯示滑動條
todayButton: true, // ture顯示今天按鈕 false不顯示今天按鈕 位置在datepicker左上角
prevButton: true, // ture顯示上一月按鈕 false不顯示上一月按鈕 位置在datepicker左上角
nextButton: true, // ture顯示下一月按鈕 false不顯示下一月按鈕 位置在datepicker又上角
scrollMonth: true, // ture 設(shè)置datepicker的月份可以滑動 false設(shè)置datepicker的月份不可以滑動
lazyInit: false, // 翻譯： 初始化插件發(fā)生只有當(dāng)用戶交互。大大加速插件與大量的領(lǐng)域的工作
mask: false, // 使用輸入掩碼。真正的-自動生成一個字段的“格式”的面具，從0到9的數(shù)字，設(shè)置為值的最高可能的數(shù)字。例如：第一個小時的數(shù)字不能大于2，而第一位數(shù)字不能大于5 如：{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
validateOnBlur: true, // 失去焦點時驗證datetime值輸入,。如果值是無效的datetime,然后插入當(dāng)前日期時間值
yearStart: 1950, // 設(shè)置最小的年份
yearEnd: 2050, // 設(shè)置最大的年份
monthStart: 0, // 設(shè)置最小的月份
monthEnd: 11, // 設(shè)置最大的月份
roundTime: 'round', // 設(shè)置timepicker的計算方式 round四舍五入 ceil向上取整 floor向下取整
allowDateRe : null, // 設(shè)置正則表達(dá)式檢查日期 如：{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
disabledDates : [], // 設(shè)置不可點擊的日期 如：disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
disabledWeekDays: [], // 設(shè)置不可點擊的星期 如：disabledWeekDays:[0,3,4]
yearOffset: 0, // 設(shè)置偏移年份 如：2 代表當(dāng)前年份加2 -2 代表當(dāng)前年份減2
beforeShowDay: null, // 顯示datetimepicker之前可調(diào)用的方法 {beforeShowDay:function(d) {console.log("bsd"); } }
enterLikeTab: true, // tab按鍵均可使datetimepicker關(guān)閉 true點擊回車鍵可使datetimepicker關(guān)閉 false點擊回車鍵不可使datetimepicker關(guān)閉
showApplyButton: false // 相當(dāng)于確定按鈕 true顯示 false隱藏
});
簡單敘述jquery datetimepicker的相關(guān)點擊方法
/*
* 監(jiān)聽時間插件顯示時的事件
*/
$('#datetimepicker').datetimepicker({
onShow: function(dateText, inst) {
console.log("---已打開datetimepicker----");
}
});
/*
* 監(jiān)聽時間插件關(guān)閉時的事件
*/
$('#datetimepicker').datetimepicker({
onClose: function(dateText, inst) {
console.log("---已關(guān)閉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)聽獲取當(dāng)前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);
}
});
