技术饭

layui的插件laydate的时间范围控制

copylian    0 评论    929 浏览    2021.08.13

layui的插件laydate的时间范围控制,laydate插件本身有很多的设置,但是有的可能需要自定义,这种情况就需要自行开发设置了,现有的需求是需要把时间范围限定在3个月内,而且可以通过选择今天、最近一周、最近一月、最近三月来设置时间。

官方文档:https://www.layui.com/doc/modules/laydate.html

HTML:

<div class="layui-form-item layui-inline">
            <label class="layui-form-label" for="pay_time" style="width:auto">交易时间:</label>
            <div class="layui-input-inline" style="width:286px">
                <input type="text" name="pay_time" id="pay_time" readonly="readonly" placeholder="请输入时间" lay-verify="pay_time" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width:80px">
                <select name="pay_time_date" lay-filter="pay_time_date" id="pay_time_date">
                    <option value="1">今天</option>
                    <option value="2">最近一周</option>
                    <option value="3">最近一个月</option>
                    <option value="4">最近三个月</option>
                </select>
            </div>
        </div>
        <script>
            layui.use('laydate'function(){
                var laydate = layui.laydate;

                //获取前三个月时间
                var d = new Date();
                d.setMonth(d.getMonth() - 3);
                var startDate = d.toLocaleDateString();

                //实例化时间
                var date = new Date();

                //常规用法
                laydate.render({
                    elem: '#pay_time',
                    type: 'datetime',
                    range: true,
                    min: startDate.split('/').join('-') + " 00:00:00",
                    max: date.toLocaleDateString().split('/').join('-') + " 23:59:59"
                });
            });

            function changePayTime(){
                alert(1);
            }
        </script>


JS:

//监听提交
        form.on('submit(search)'function(data){
            reload($('#searchform').fixedsSerializeArray());
            return false;
        });

        form.on('select(pay_time_date)'function(data){
            if(data.value == 1) {
                //今天
                var date = new Date();
                var startDate = date.toLocaleDateString().split('/').join('-') + " 00:00:00";
                var endDate = date.toLocaleDateString().split('/').join('-') + " 23:59:59";
                $('#pay_time').val(startDate + " - " + endDate);

            } else if(data.value == 2){
                //最近一周
                var d = new Date();
                d.setDate(d.getDate() - 7);
                var startDate = d.toLocaleDateString().split('/').join('-') + " 00:00:00";;
            
                var date = new Date();
                var endDate = date.toLocaleDateString().split('/').join('-') + " 23:59:59";
                $('#pay_time').val(startDate + " - " + endDate);
            } else if(data.value == 3){
                //最近一月
                var d = new Date();
                d.setMonth(d.getMonth() - 1);
                var startDate = d.toLocaleDateString().split('/').join('-') + " 00:00:00";;
            
                var date = new Date();
                var endDate = date.toLocaleDateString().split('/').join('-') + " 23:59:59";
                $('#pay_time').val(startDate + " - " + endDate);
            } else if(data.value == 4){
                //最近三月
                var d = new Date();
                d.setMonth(d.getMonth() - 3);
                var startDate = d.toLocaleDateString().split('/').join('-') + " 00:00:00";;
            
                var date = new Date();
                var endDate = date.toLocaleDateString().split('/').join('-') + " 23:59:59";
                $('#pay_time').val(startDate + " - " + endDate);
            }
        });

        //重载
        var reload = function(data){
            //验证条件
            if(data.length <= 0){
                aikehou_tips('请输入搜索的条件!''danger''fa fa-close');
                return false;
            }
            var where = {};
            $.each(datafunction(indexel){
                where[el.name] = el.value;
            });

            //再次验证
            if(isEmpty(where)){
                aikehou_tips('请输入搜索的条件!''danger''fa fa-close');
                return false;
            }

            //执行重载
            table.reload('table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {seardata:where},
                done:function(){
                    //关闭搜索弹窗
                }
            });
        }


效果:

1628834355(1).png

飓风呀
感谢你的支持,我会继续努力!
扫码打赏,感谢您的支持!
layui 插件 laydate 时间 

文明上网理性发言!

  • 还没有评论,沙发等你来抢