前面是嘗試結果，有興趣的可以康康，趕時間的可以直接翻到底下 ----->直達車

因為只有一個頁面，沒什么標準，所以自己就使用了layui的時間控件，并且作為獨立組件。

第一次嘗試 - 使用 min

一開始只想讓結束時間有個時間限制，就是結束時間在開始時間后面。直接在結束時間的控件上添加了 min 屬性，可想而知：

在結束時間控件上添加了 min 屬性，與開始時間沒有關聯；

每次打開結束時間控件，可選擇的值都是 min 之后的值；

<div class="timeOrange-input"> <input type="text" class="ind2 cloneStart" id="startTime" placeholder="開始時間" autocomplete="off" readonly><span> - </span><input type="text" class="ind2 cloneEnd" id="endTime" placeholder="結束時間" autocomplete="off" readonly> </div> <script> var params = { //請求參數date: "",devId: "",startTime: "",endTime: "" }; laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',done: function(value,date){params.startTime = value; } }); laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',min: "00:00:00"done: function(value,date){params.startTime = value; } }); </script>

第二次嘗試 - 使用 ready

Layui 中有個 ready 回調函數，它是控件初始打開的回調。就想可不可以一打開這個控件時間限制就已經被加進去了。

<script> laydate.render({elem:'#endTime',type: "time",format:'HH:mm',ready: function(date){console.log(this,date)//this.dateTime記錄了當前的年、月、日，//因為原來的min是從 1900年1月1日 開始的，如果不設置當前的日期，//控制的hours/minutes/seconds就是1990年那天的最小值this.min = {year: this.dateTime.year, month: this.dateTime.month,date: this.dateTime.date,hours: parseInt(params.startTime.split(":")[0]),minutes: parseInt(params.startTime.split(":")[1]),seconds: 0}done: function(value, date){params.endTime = value; } }); </script>

此時可以發現，第一次點擊時不產生效果，但是第二次生效了！

這是因為 ready 是控件在打開時觸發，也就是打開控件后給控件設置操作，而不是在控件打開之前觸發。當第一次打開控件時，min 還沒有被設置，我們在 ready 中設置了控件的 min 值，第二次打開控件，此時min已經被設置了。

第三次嘗試 - 在開始時間控件中設置結束時間的 min值

layDate 中的 done 是控件選擇完畢后的回調，點擊日期、清空、現在、確定均會觸發該函數。
參考呂一

<script> laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',max: '23:59:59',done: function(value, date){params.startTime = value; //不清楚對象里面的屬性，可以通過查看對屬性值進行改寫console.log(endT.config.min); endT.config.min = {year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}} });var endT = laydate.render({elem:'#endTime',type: "time",format:'HH:mm',done: function(value, date){params.endTime = value; } }); </script>

滿足我想要的效果，但是選擇完結束時間后，再去選擇開始時間，因為開始時間沒有做限制，重新選擇時可以選擇到 在結束時間后的時間，所以給開始時間和結束時間都做了限制。

結束 - 參考月生三州

開始時間和結束時間相互限制。

<script> var startT = laydate.render({elem: '#startTime', //指定元素type: 'time',format:'HH:mm',max: '23:59:59',done: function(value, date){params.startTime = value; endT.config.min = { //給結束時間設置最小值year: date.year,month: date.month -1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}} });var endT = laydate.render({elem:'#endTime',type: "time",format:'HH:mm',done: function(value, date){params.endTime = value; startT.config.max = { //給開始時間設置最大值，讓開始時間<結束時間year: date.year,month: date.month -1, //設置月份時需要減一date: date.date,hours: date.hours,minutes: date.minutes,seconds: 0}} }); </script>

注意：上面這個動圖是在結束時間的 done 中設置 startT.config.min的效果。

總結

以上是生活随笔為你收集整理的layui 关于layDate设置时间限制问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。