Layui实现日期选择器限定

最新推荐文章于 2025-06-18 15:09:18 发布

听风听雨听世界

最新推荐文章于 2025-06-18 15:09:18 发布

阅读量754

点赞数 1

CC 4.0 BY-SA版权

分类专栏： blog 文章标签：数据库 java javascript jquery js

本文链接：https://blog.csdn.net/asdfasjfaf/article/details/107530853

blog 专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何使用layui时间选择器实现时间片（天、周、月、季度）的联动选择，通过示例代码详细解释了如何根据所选时间片动态调整时间范围，以满足数据库分表查询的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
                        };
                    }
                }
            }
        });
    });