layui 日期选择开始时间，结束时间处理；

显示效果1：

代码设置实现：

     
     //时间范围设置
        laydate.render({
            elem: '#timeRange',
            range: true,
            type: 'datetime',
            value:start+'- '+end,
            change: function(value, date, endDate){
                var arr=value.split(' - ');
                start=arr[0];
                end=arr[1];
                startS=new Date(arr[0]).getTime();
                endS=new Date(arr[1]).getTime();
                var remain=parseInt(endS-startS);
                var yearM=7*24*60*60*1000;
                if(remain>yearM){
                    layer.alert('时间跨度不能超过7天',{
                        skin: 'alert-zindex'
                    },function(index){
                        layer.close(index);
                    })
                }else {
                    $("#startt").text(start);
                    $("#endt").text(end);
                }

            }
        });

//html:
<div class="layui-inline mt-8 edit-time">
   <label class="layui-form-label">修改时间：</label>
     <div class="layui-input-inline">
        <input type="text" style="width:300px" name="timeRange"  class="layui-input" id="timeRange" placeholder=" 请选择合并订单时间范围 ">
     </div>
</div>

其他时间设置：

需求选择开始时间，结束时间联动后推一个月，选择的区域不能超出12个月；

html:

<div class="layui-inline mt-8">
   <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" value="<?=$start?>" id="start" name="start" placeholder="yyyy-MM-dd" lay-verify="date" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline mt-8">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="end" name="end" value="<?=$end?>" placeholder="yyyy-MM-dd" lay-verify="date" autocomplete="off">
                    </div>
                </div>

js:

/**
         *获取下一个月的输入日期
         *{param:DateTime} date 输入日期(YYYY-MM-DD)
         *{param:number } monthNum 月数
         */
        function GetNextMonthDay (date, monthNum){
            var dateArr = date.split('-');
            var year = dateArr[0]; //获取当前日期的年份
            var month = dateArr[1]; //获取当前日期的月份
            var day = dateArr[2]; //获取当前日期的日
            var days = new Date(year, month, 0);
            days = days.getDate(); //获取当前日期中的月的天数
            var year2 = year;
            var month2 = parseInt(month) + parseInt(monthNum);
            if (month2 >12) {
                year2 = parseInt(year2) + parseInt((parseInt(month2) / 12 === 0 ? 1 : parseInt(month2) / 12));
                if(parseInt(month2) % 12){
                    month2 = parseInt(month2) % 12;
                }else{
                    month2 = 12;
                }
            }
            var day2 = day;
            var days2 = new Date(year2, month2, 0);
            days2 = days2.getDate();
            if (day2 > days2) {
                day2 = days2;
            }
            if (month2 < 10) {
                month2 = '0' + month2;
            }

            var t2 = year2 + '-' + month2 + '-' + day2;
            return t2;
        }
        //时间设置
        var startt= '<?=$start?>';
        var endtt='<?=$end?>';
        var nextendyearval = GetNextMonthDay(startt,12);
        getstartt(startt,'2018-10-01','2060-12-31');
        getendtt(endtt,'2018-10-01','2060-12-31');
        //开始时间
        function getstartt(val,min,max){
            //常规用法
            laydate.render({
                elem: '#start'
                ,type: 'date'
                ,value:val
                ,min:min
                ,max:max
                ,done: function(value, date, endDate){
                    let nextendval = GetNextMonthDay(value,1);
                    let nextendyearval = GetNextMonthDay(value,12);
                    getendtt(nextendval,value,nextendyearval);
                }
            });
        }

        //结束时间
        function getendtt(val,min,max){
            //常规用法
            laydate.render({
                elem: '#end'
                ,type: 'date'
                ,value:val
                ,min:min
                ,max:max
                ,done: function(value, date, endDate){
                    let starte = $("#start").val();
                    let nextyear = GetNextMonthDay(starte,12);
                    if(value<starte){
                        layer.msg('结束时间不能小于开始时间！');
                        $("#end").val(starte)
                    }
                    if(value>nextyear){
                        layer.msg('选择的时间不能超过12个月！');
                        value=nextyear;
                        $("#end").val(value);
                    }
                }
            });
        }