這幾天碰到了layui中的日期與時間這個，本以為很簡單的，可是又一個需求是這樣的，有兩個日期選擇框，第一個日期選擇框要求最小日期不得小於當前日期，第二個日期選擇框要求最小日期為第一個日期選擇框的選中日期，最大日期須在24小時內，本以為不會很難。
於是按照慣例，先渲染第一個日期選擇框，然后渲染第二個日期選擇框，結果后來發現這樣行不通。還是直接上具體的代碼吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer</title> <link rel="stylesheet" href="../dist/css/layui.css"> </head> <body> <form action="" class="layui-form"> <div class="layui-form-item"> <div class="layui-inline"> <label for="" class="layui-form-label">時間段</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="startTime"> </div> <div class="layui-form-mid">到</div> <div class="layui-input-inline endTime"> <input type="text" class="layui-input" id="endTime"> </div> </div> </div> </form> <script src="../dist/jquery.min.js"></script> <script src="../dist/layui.js"></script> <script> let [form,laydate] = ["",""]; var now = new Date(); var start = now.getTime(); // 將當前時間轉換為時間戳 layui.use(['form','laydate'],function(){ form = layui.form; laydate = layui.laydate; laydate.render({ elem:'#startTime', type:'datetime', // 可選擇年、月、日、時、分、秒 min:start, // 規定最小日期 done:function(value){ // value為第一個日期選擇框選擇的日期 const start2 = new Date(value).getTime(); const end = start2 + 24*60*60*1000; const elemId = "endTime" + new Date().getTime(); // 當第一個日期選擇框選擇完日期后，將類選擇器endTime里的內容清空，給它重新添加內容，且新添加元素的id是動態改變的，這樣第二個日期框在第一個日期框每次選擇完后會重新渲染 $('.endTime').empty().append(`<input type="text" class="layui-input" id="${elemId}">`) laydate.render({ elem:`#${elemId}`, type:'datetime', min:start2, // 最小日期不得小於第一個日期選擇框的值 max:end // 最大日期在24小時內 }) } }); }) </script> </body> </html>
雖然這樣能解決問題，能保證第二個日期框最小值為第一個日期框的選擇值，最大值為第一個日期選擇值的24小時內。但是中間存在着一個bug，那就是只有選擇第一個日期框后，才能更改第二個日期框中的值，顯然這不是我們想要的，我們想要的是，可以直接更改第二個日期框的值，同時滿足條件：最小值為第一個日期框的選擇值，最大值為第一個日期選擇值的24小時內。那么這時候就要對第二個日期框再渲染一次，只不過這次不是在第一個日期框選擇后的回調函數里渲染，而是與第一個日期框一起渲染。那么此時的代碼為：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer</title> <link rel="stylesheet" href="../dist/css/layui.css"> </head> <body> <form action="" class="layui-form"> <div class="layui-form-item"> <div class="layui-inline"> <label for="" class="layui-form-label">時間段</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="startTime"> </div> <div class="layui-form-mid">到</div> <div class="layui-input-inline endTime"> <input type="text" class="layui-input" id="endTime"> </div> </div> </div> </form> <script src="../dist/jquery.min.js"></script> <script src="../dist/layui.js"></script> <script> let [form,laydate] = ["",""]; var now = new Date(); var start = now.getTime(); // 將當前時間轉換為時間戳 layui.use(['form','laydate'],function(){ form = layui.form; laydate = layui.laydate; laydate.render({ elem:'#startTime', type:'datetime', // 可選擇年、月、日、時、分、秒 min:start, // 規定最小日期 done:function(value){ // value為第一個日期選擇框選擇的日期 const start2 = new Date(value).getTime(); const end = start2 + 24*60*60*1000; const elemId = "endTime" + new Date().getTime(); // 當第一個日期選擇框選擇完日期后，將類選擇器endTime里的內容清空，給它重新添加內容，且新添加元素的id是動態改變的，這樣第二個日期框在第一個日期框每次選擇完后會重新渲染 $('.endTime').empty().append(`<input type="text" class="layui-input" id="${elemId}">`) laydate.render({ elem:`#${elemId}`, type:'datetime', min:start2, // 最小日期不得小於第一個日期選擇框的值 max:end // 最大日期在24小時內 }) } }); laydate.render({ elem:'#endTime', type:'datetime', min:, // 該值為第一個日期框的值，一般是從服務器端獲取 max: // 該值為第一個日期框值的24小時內，可用時間戳來解決 }) }) </script> </body> </html>