須知:語言選擇中文,現在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,               // 翻譯: 初始化外掛發生只有當使用者互動。大大加速外掛與大量的領域的工作
mask: false,                   // 使用輸入掩碼。真正的-自動生成一個欄位的“格式”的面具,從09的數字,設定為值的最高可能的數字。例如:第一個小時的數字不能大於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);
}
});

 

datepicker限定可選時間範圍,使用參考

http://blog.csdn.net/biedazhangshu/article/details/50727005

https://www.cnblogs.com/linJie1930906722/p/6066071.html

文章標籤
全站熱搜
創作者介紹
創作者 benny 的頭像
benny

Benny的網站開發筆記

benny 發表在 痞客邦 留言(0) 人氣(607)