一、timepicker
js和css下載
https://www.bootcdn.cn/bootstrap-timepicker/
配置參數
$('.date').timepicker({
minuteStep:1, //分鍾間隔
showMeridian:false, //是否展示網咯時間
defaultTime:"", //默認時間
secondStep:1 //秒鍾間隔
});
一、datetimepicker
js和css下載
https://www.bootcdn.cn/bootstrap-datetimepicker/
配置參數
$('#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隱藏
});