TP5.1 + layui時間范圍設置方法

最近在制作一個項目時遇到一個問題,就是開始時間和結束時間是相關聯的,結束時間的選擇范圍是最小為開始時間,最大為開始時間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([&#39;form&#39;,&#39;layedit&#39;, &#39;laydate&#39;,&#39;layer&#39;,&#39;element&#39;], 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: &#39;#bx_start&#39;,            type: &#39;date&#39;,            max: max,            min: min,            showBottom: false,            btns: [&#39;clear&#39;, &#39;confirm&#39;],            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視頻教程》

? 版權聲明
THE END
喜歡就支持一下吧
點贊12 分享