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)重新进行渲染，并不生效。

错误代码如下：

发现在选择时间后两个控件并不会重新渲染，在这上面遇到了很大的坑。网上查资料发现laydate.render()只是在第一次渲染起作用并不能重新渲染。

 

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

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

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

重新创建即删除Input元素，再重新在原位置创建一个：

 

这个方法个人认为比较适合老版本的laydate,之前老项目的用的是laydate老版本,删除旧元素，创建新元素

,重新设置这个max,min的值（这是老版本的laydate调用，之前项目是这么调用的，laydate1.0.9也没有文档了） 。

新版本laydate真的没必要这样做了，这样生成的laydate实例似乎没有回收（具体js机制本人还不了解TAT但是只知道无限点击test2时F12控制台内存一直在变大）

 

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