LayUi两个日期控件加以限制(开始时间要比结束时间早)

  • 时间:
  • 来源:互联网
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37730370/article/details/103293595

功能要求:例如 检出时间的开始时间2019-11-27选中后,结束时间只能选27号及其之后的日期

 同理,结束时间如果选中了2019-11-27,开始时间只能选27号及其之前的日期

 代码实现如下

html代码

<#--搜索栏-->
<div class="layui-form tool-bar">
    检出时间:<input class="layui-input search-input" type="text" id="date1" placeholder="开始时间"/>
    至:&nbsp;&nbsp;<input class="layui-input search-input" type="text" id="date2" placeholder="结束时间"/>
    <button class="layui-btn layui-btn-normal" data-type="reload" style="margin-left: 10px">搜索</button>
</div>

Js代码

<script>
    layui.use(['form', 'laydate', 'table'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var $ = layui.$;


            //日期范围
            var startDate = laydate.render({
                elem: '#date1',
                type: 'date',//设置日期的类型
                theme: '#2c78da',
                done: function (value, date) {
                    if (value != "") {
                        date.month = date.month - 1;
                        endDate.config.min = date;
                    } else {
                        endDate.config.min = startDate.config.min;
                    }
                },
            });
            var endDate = laydate.render({
                elem: '#date2',//绑定的控件名称
                type: 'date',//设置日期的类型
                theme: '#2c78da',
                done: function (value, date) {
                    if (value != "") {
                        date.month = date.month - 1;
                        startDate.config.max = date;
                    } else {
                        startDate.config.max = endDate.config.max;
                    }
                }
            });
        }
    );
</script>

 

本文链接http://element-ui.cn/news/show-350.aspx