layui文字框實現選擇起始時間和結束時間
阿新 • • 發佈：2018-11-09
首先要呼叫layui時間外掛必須下載layui.js檔案，這個可以在官網去下載的(https://www.layui.com/)，我這個功能是可以選擇當前時間的前一天，或者後一小時的時間，這個根據具體需求可以修改的：
如下圖所示：
html程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="text" id="text1" datatype='ddd1' value="2018-9-2 18:43:30" /> <input type="text" id="text2" datatype='ddd2' value="2018-9-2 18:43:30" /> <input type="text" id="text3" datatype='ddd3' /> <input type="text" id="text4" datatype='ddd4' /> </body> </html>
js程式碼：（程式碼中寫有註釋，大家可以看看，有不懂的可以問我）
<script src="../demo/js/jquery-1.11.3.js"></script> <script src="layui.js"></script> <script> timeshowtwo('#text1', '#text2'); timeshowtwo('#text3','#text4'); //timeshowtwo('#text4', '#text3'); function timeshowtwo(t1, t2) { layui.use('laydate', function() { var min = '1440';//獲取多少分鐘後的時間 var laydate = layui.laydate; var currentime = frontOneHour('yyyy-MM-dd hh:mm:ss') //當前時間格式化 //第一個框的時間 var oneTime = beforeTime(currentime,60)//獲取當前時間前一小時的時間 var twoTime = ""; //常規用法 laydate.render({ elem: t1, calendar: true,//顯示公曆節日 trigger: 'click', type: 'datetime', value: new Date(), format: 'yyyy-M-d H:m:s', done: function(value, date) { var datatype=$(t1).attr('datatype'); if(datatype=='ddd1'){ console.log(datatype+'第1個框'); //min=$('jjkkk') //獲取第一個時間框下拉分鐘的值 // if(parseInt(min) > 1440) { // //讓第一個下拉框不能選中 // } }else if(datatype=='ddd3'){ console.log(datatype+'第3個框'); //獲取第二個時間框下拉分鐘的值 }else if(datatype=='ddd5'){ console.log(datatype+'第5個框'); //獲取第二個時間框下拉分鐘的值 } twoTime=afterTime(value, min); laydate.render({ elem: t2, calendar: true, type: 'datetime', value: twoTime,// format: 'yyyy-M-d H:m:s', }); } }); //預設1小時之後的時間 laydate.render({ elem: t2, type: 'datetime', value: beforeTime(currentime, 60), format: 'yyyy-M-d H:m:s', done: function(value, date) { var datatype=$(t2).attr('datatype'); if(datatype=='ddd2'){ console.log(datatype+'第2個框'); //min=$('jjkkk') //獲取第一個時間框下拉分鐘的值 // if(parseInt(min) > 1440) { // //讓第一個下拉框不能選中 // } }else if(datatype=='ddd4'){ console.log(datatype+'第4個框'); //獲取第二個時間框下拉分鐘的值 }else if(datatype=='ddd6'){ console.log(datatype+'第6個框'); //獲取第二個時間框下拉分鐘的值 } oneTime=beforeTime(value, min); laydate.render({ elem: t1, calendar: true, type: 'datetime', value: oneTime, format: 'yyyy-M-d H:m:s' }); } }); }); } function frontOneHour(fmt) { var currentTime = new Date(new Date().getTime()) // console.log(currentTime) // Wed Jun 20 2018 16:12:12 GMT+0800 (中國標準時間) var o = { 'M+': currentTime.getMonth() + 1, // 月份 'd+': currentTime.getDate(), // 日 'h+': currentTime.getHours(), // 小時 'm+': currentTime.getMinutes(), // 分 's+': currentTime.getSeconds(), // 秒 'q+': Math.floor((currentTime.getMonth() + 3) / 3), // 季度 'S': currentTime.getMilliseconds() // 毫秒 } if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (currentTime.getFullYear() + '').substr(4 - RegExp.$1.length)) for(var k in o) { if(new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) } return fmt; } //獲取選擇時間之後多少分鐘的時間 function afterTime(value, t) { var date = new Date(value); var seperator1 = "-"; var seperator2 = ":"; //前十分鐘時間 var minutes = parseInt(t); var interTimes = minutes * 60 * 1000; var interTimes = parseInt(interTimes); date = new Date(Date.parse(date) + interTimes); var month = date.getMonth() + 1; var strDate = date.getDate(); var hour = date.getHours(); var minutes = date.getMinutes(); if(month >= 1 && month <= 9) { month = "0" + month; } if(strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } if(hour >= 0 && hour <= 9) { hour = "0" + hour; } if(minutes >= 0 && minutes <= 9) { minutes = "0" + minutes; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + hour + seperator2 + minutes + seperator2 + date.getSeconds(); return currentdate; } //獲取選擇時間之前多少分鐘的時間 function beforeTime(value, t) { var date = new Date(value); var seperator1 = "-"; var seperator2 = ":"; //前十分鐘時間 var minutes = parseInt(t); var interTimes = minutes * 60 * 1000; var interTimes = parseInt(interTimes); date = new Date(Date.parse(date) - interTimes); var month = date.getMonth() + 1; var strDate = date.getDate(); var hour = date.getHours(); var minutes = date.getMinutes(); if(month >= 1 && month <= 9) { month = "0" + month; } if(strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } if(hour >= 0 && hour <= 9) { hour = "0" + hour; } if(minutes >= 0 && minutes <= 9) { minutes = "0" + minutes; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + hour + seperator2 + minutes + seperator2 + date.getSeconds(); return currentdate; } </script>