如何設置TP5.1+layui時間范圍

小編給大家分享一下如何設置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(['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 = {
                   '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 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>

以上是“如何設置TP5.1+layui時間范圍”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！