layui的laydate插件之坑——渲染问题

最近项目使用了laydate.js这个时间插件。自从这个插件升级后确实还挺好用的，在选择时间上操作非常简单：

laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

通过elem绑定元素后，就可以使用了。（记得elem:'#text'中的这个#不要落下）

但是当我做一个时间范围选择时，问题来了：结束时间不能早于开始时间，即选择完开始时间，结束时间应限制开始时间之后。

起初我简单的以为laydate这个插件和vue.js的动态绑定是相同的，所以在done回调函数改laydate的max和min这两个参数，然后想通过调用laydate.render(startTime)重新进行渲染，并不生效。

错误代码如下：

<script>
    var startDate = {
        elem:'#startTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            endDate.min = value
            laydate.render(endDate)
        }
    }
    var endDate = {
        elem:'#endTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            startDate.max = value
            laydate.render(startDate);
        }
    }
    $(function () {
        laydate.render(endDate)
        laydate.render(startDate);
    })
</script>

发现在选择时间后两个控件并不会重新渲染，在这上面遇到了很大的坑。

网上查资料发现： laydate.render()只是在第一次渲染起作用，不能重新渲染。

看到其他blog发现原来改配置参数之间通过startDate.config.[param]进行对插件配置参数的修改，修改代码如下：

<script>
    var startDate = laydate.render({
        elem:'#startTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            endDate.config.min ={
                year:date.year,
                month:date.month-1, 
                date: date.date,
            };
        }
    })
    var endDate = laydate.render({
        elem:'#endTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            startDate.config.max = {
                year: date.year,
                month: date.month - 1,
                date: date.date,
            }
        }
    })
</script>

这里的month要记得减一。因为回调函数的date.month和config.max.month是不一样的。

后来查资料发现，可以先删除这个laydate实例，再重新创建来达到渲染效果。

laydate 文档：http://www.layui.com/doc/modules/laydate.html

转载：https://blog.csdn.net/wmq1314lql/article/details/81750092

layui的laydate插件之坑——渲染问题

猜你喜欢