layui 起止日期范围（备忘）

最新推荐文章于 2025-04-28 15:55:09 发布

原创最新推荐文章于 2025-04-28 15:55:09 发布 · 633 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的日期选择器联动功能，通过两个输入框分别选择起始时间和结束时间，当选择起始时间时，会限制结束时间的最小值；反之亦然。此功能适用于需要限定时间范围的场景。

<input class="layui-input" id="startDate" placeholder="请选择起始时间" /> -
<input class="layui-input" id="endDate" placeholder="请选择结束时间" />

     layui.use(['form', 'layer', 'laydate'], function () {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate;     
        //日期
        var start = laydate.render({
            elem: '#startDate',
            type: 'date',
            done: function (value, date) {
                endMax = end.config.max;
                end.config.min = date;
                end.config.min.month = date.month - 1;
            }
        });
        var end = laydate.render({
            elem: '#endDate',
            type: 'date',
            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;
            }
        })
     })