Thinkphp5.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>