jquery的datetimepicker時間控件除了樣式有點不太美觀，功能性還是相當強大的。
在正常情況下input的type應該設置爲"text"，可點擊又可輸入（mask,enterLikeTab 要在type="text"時使用）；我個人選擇時間時不太贊同支持輸入，如果輸入會有時間格式錯誤的出現；所以這裏我就把input的type應該設置爲"button",只可點擊不可輸入。
使用方法：
添加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');
PS : 這裏是否失效看版本，不是絕對就失效了
$('#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, // 翻譯： 初始化插件發生只有當用戶交互。大大加速插件與大量的領域的工作
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的相關點擊方法
/*
* 監聽時間插件顯示時的事件
*/
$('#datetimepicker').datetimepicker({
onShow: function(dateText, inst) {
console.log("---已打開datetimepicker----");
}
});
/*
* 監聽時間插件關閉時的事件
*/
$('#datetimepicker').datetimepicker({
onClose: function(dateText, inst) {
console.log("---已關閉datetimepicker----");
}
});
/*
* 監聽點擊日期時的事件
*/
$('#datetimepicker').datetimepicker({
onSelectDate: function(dateText, inst) {
console.log(dateText);
}
});
/*
* 監聽點擊時分的事件
*/
$('#datetimepicker').datetimepicker({
onSelectTime: function(dateText, inst) {
console.log(dateText);
}
});
/*
* 監聽點擊datepicker 上一月下一月按鈕及選擇月份點擊事件
*/
$('#datetimepicker').datetimepicker({
onChangeMonth: function(dateText, inst) {
console.log(dateText);
}
});
/*
* 監聽獲取當前datetimepicker顯示的所有日期信息
*/
$('#datetimepicker').datetimepicker({
onGetWeekOfYear: function(dateText, inst) {
console.log(dateText);
}
});
/*
* 監聽選擇年份的點擊事件
*/
$('#datetimepicker').datetimepicker({
onChangeYear: function(dateText, inst) {
console.log(dateText);
}
});
/*
* 實時監聽你選擇的日期和時間
*/
$('#datetimepicker').datetimepicker({
onChangeDateTime: function(dateText, inst) {
console.log(dateText);
}
});
/*
* 實時監聽datetimepicker上的所有事件
*/
$('#datetimepicker').datetimepicker({
onGenerate: function(dateText, inst) {
console.log(dateText);
}
});