最近在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间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赋值

要获取maxmin的值,首先要了解时间换算单位,大概思路为基本换算单位以小时为准,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>


1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!
2.本站部分资源包有加密,加密统一密码为:www.51zhanma.cn
3. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
4. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
5. 如果您也有好的资源或教程,您可以投稿发布,用户购买后有销售金额的80%以上的分成收入!
6.如有侵权请联系客服邮件kefu@zhanma.cn
站码网 » Thinkphp5.1 + layui时间范围设置方法

发表评论

  • 850本站运营(天)
  • 1364会员数(个)
  • 3278资源数(个)
  • 1285评论数(个)
  • 0 近 30 天更新(个)
加入 VIP