美文网首页小菜鸟
Layui实现日期选择器限定

Layui实现日期选择器限定

作者: 我是一颗小虎牙_ | 来源:发表于2020-07-29 11:02 被阅读0次
<div class="layui-form-item" >
    <label class="layui-form-label" style="width: 100px">
        试跑日期:
    </label>
    <div class="layui-inline">
        <input class="layui-input" lay-verify="required" type="text" id="runTimeStart" name="runTimeStart" readonly/>
    </div>---&nbsp;
    <div class="layui-inline">
        <input class="layui-input" lay-verify="required" type="text" id="runTimeEnd" name="runTimeEnd"  readonly/>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label" style="width: 100px">
        <span class="we-red">*</span>时间片:
    </label>
    <div class="layui-input-inline">
        <select lay-filter="slotSelect" id="slotSelect" name="slot">
            <option value="day">天</option>
            <option value="week">周</option>
            <option value="month">月</option>
            <option value="season"  >季度</option>
        </select>
    </div>
</div>

选择时间片后进行改变时间限定,主要区分季度和当月,原因时数据库根据月份数据分表,需要根据月份查不同的表。layui的时间选择器使用方法可以看看官方文档。

layui.use(['laydate', 'jquery', 'form','admin'], function() {
        var laydate = layui.laydate,
            $ = layui.jquery,
            admin = layui.admin;
            var form = layui.form;
        var startTime;
        var endTime;
        //执行一个laydate实例
        startTime = laydate.render({
            elem: '#runTimeStart',//指定元素
            showBottom: false,
            done:function(value,date){   //指定开始时间时限定结束时间最大最小日期
                if (date.year != null) {
                    var solotSelect = $("#slotSelect").val();
                    if (solotSelect != "season"){
                        endTime.config.min={
                            year:date.year,
                            month:date.month-1,
                            date:date.date
                        };
                        endTime.config.max={
                            year:date.year,
                            month:date.month-1,
                            date:laydate.getEndDate()
                        };
                    }else {
                        endTime.config.min={
                            year:date.year,
                            month:date.month-1,
                            date:date.date
                        };
                        endTime.config.max={
                            year:date.year,
                            month:date.month+1,
                            date:laydate.getEndDate()-1
                        };
                    }
                }
            }
        });
        endTime = laydate.render({
            elem: '#runTimeEnd',//指定元素
            showBottom: false,
            done:function(value,date){   //指定结束时间时限定开始时间最大最小日期
                if (date.year != null){
                    var solotSelect = $("#slotSelect").val();
                    if (solotSelect != "season"){
                        startTime.config.min={
                            year:date.year,
                            month:date.month-1
                        };
                        startTime.config.max={
                            year:date.year,
                            month:date.month-1,
                            date:date.date
                        };
                    }else {
                        startTime.config.min={
                            year:date.year,
                            month:date.month-3
                        };
                        startTime.config.max={
                            year:date.year,
                            month:date.month-1,
                            date:date.date
                        };
                    }
                }
            }
        });
    });

相关文章

网友评论

    本文标题:Layui实现日期选择器限定

    本文链接:https://www.haomeiwen.com/subject/dlkhrktx.html