最近在製作一個專案時遇到一個問題,就是開始時間和結束時間是相關聯的,結束時間的選擇範圍是最小為開始時間,最大為開始時間90天后的時間,我這邊用的是layui的插件取得的日期,裡面有兩個參數min和max分別可以設定日期範圍;
其程式碼如下所示:
layui.use('laydate', function(){ var laydate = layui.laydate; //限定可选日期 var ins22 = laydate.render({ elem: '#test-limit1' ,min: '2016-10-14' ,max: '2080-10-14' }); });
但是怎麼取得max和min的值時,我遇到了難點,後面經過反覆研究Layui官方文檔和反覆的嘗試,終於解決了這一問題,分享給大家:
a.定義變數當前時間、最小時間、最大時間
var now = new Date(); var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1); var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
b.根據目前選擇的時間重新給max和min賦值
要取得max
和min
的值,首先要了解時間換算單位,大概思路為基本換算單位以小時為準,1小時為3600秒,因為laui中的時間戳是以毫秒為計算單位,所以需要再3600的基礎上再乘以1000,一天為24小時,總共90天所以是90*24*3600*1000
.
在選擇了開始時間後done : function (value, date)
中value的值為目前所選的時間,將該值轉換為時間戳記為:var date1 = new Date(value).getTime();
90天後的時間戳記為:var date2 = date1 90 * 24 * 3600 * 1000;
再將取得的時間轉換為年月日:
var date5 = { 'date': date3.getDate(), 'month': date3.getMonth() + 1, 'year': date3.getFullYear() };
將取得到的值賦值給結束時間的最小值和最大值:
end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1;
所以完整的程式碼為:
var start = laydate.render({ elem: '#bx_start', type: 'date', max: max, min: min, showBottom: false, btns: ['clear', 'confirm'], done: function (value, date) { var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳 var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间 var date3 = new Date(date2); var date5 = { 'date': date3.getDate(), 'month': date3.getMonth() + 1, 'year': date3.getFullYear() }; end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1; } });
c.將取得的min和max傳給結束時間
var end = laydate.render({ elem: '#bx_end', type: 'date', max: max, min: min, showBottom: false, done: function (value, date) { if ($.trim(value) == '') { var curDate = new Date(); date = { 'date': curDate.getDate(), 'month': curDate.getMonth() + 1, 'year': curDate.getFullYear() }; } start.config.max = date; start.config.max.month = date.month - 1; } });
以下為完整程式碼
<script> layui.use(['form','layedit', 'laydate','layer','element'], function() { $ = layui.jquery; layer = layui.layer; var form = layui.form; layedit = layui.layedit; laydate = layui.laydate; //定义变量当前时间、最小时间、最大时间 var now = new Date(); var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1); var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2); var start = laydate.render({ elem: '#bx_start', type: 'date', max: max, min: min, showBottom: false, btns: ['clear', 'confirm'], done: function (value, date) { var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳 var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的 var date3 = new Date(date2); var date5 = { &#39;date&#39;: date3.getDate(), &#39;month&#39;: date3.getMonth() + 1, &#39;year&#39;: date3.getFullYear() }; end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1; } }); var end = laydate.render({ elem: &#39;#bx_end&#39;, type: &#39;date&#39;, max: max, min: min, showBottom: false, done: function (value, date) { if ($.trim(value) == &#39;&#39;) { var curDate = new Date(); date = { &#39;date&#39;: curDate.getDate(), &#39;month&#39;: curDate.getMonth() + 1, &#39;year&#39;: curDate.getFullYear() }; } start.config.max = date; start.config.max.month = date.month - 1; } }); }); </script>
#相關文章推薦:《TP5.1 為圖片新增浮水印功能》《TP5.1 layui實作欄位數的呼叫》《最新的10個thinkphp影片教學》
以上是TP5.1 + layui時間範圍設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!