layDate插件设置开始和结束时间

使用layDate插件可以快速实现日历选框功能。下面是关于如何设置开始和结束时间的攻略：

1. 准备工作

需在HTML文件中引入layDate.js文件和laydate.css文件。

<link rel="stylesheet" href="路径/laydate.css">
<script src="路径/laydate.js"></script>

1. 开始时间和结束时间的设置方式

2.1 最简单的设置方式

若要限制用户仅能选择今天及今天之后的日期，则设置min属性的值为0即可。

<input type="text" id="test" value="2019-01-01">
<script>
  //执行一个laydate实例
  laydate.render({
    elem: '#test', //指定元素
    min: 0, //设定最小日期为当前日期
    value: new Date() //设定初始值为当前日期
  });
</script>

2.2 适用于时间区间的设置方式

• max：最大日期
• min：最小日期
• do: 每当用户选择一个日期时，即触发一次 do() 的回调
• position：组件所在位置，top or bottom,默认bottom
• range:是否显示时间范围，即开始日期和结束日期是否在一个控件内选择

<input class="layui-input" type="text" name="time" id="test1" lay-verify="required" placeholder="选择时间段">
<script>
    var start = laydate.render({
        elem: '#test1_start', //开始日期的元素选择器
        done: function (value, date) {
            // 将结束日期的min属性设为开始日期的最小值
            end.config.min = {
                year: date.year,
                month: date.month - 1, //注意月份要减去1
                date: date.date
            };
            // 自动触发结束日期的点击事件
            end.config.elem[0].focus();
        }
    });

    var end = laydate.render({
        elem: '#test1_end', //结束日期的元素选择器
        done: function (value, date) {
            // 将开始日期的max属性设为结束日期的最大值
            start.config.max = {
                year: date.year,
                month: date.month - 1, //注意月份要减去1
                date: date.date
            }
        }
    });
</script>

以上两种方式都可以实现开始和结束时间的设置，根据实际需要选择即可。