laydate插件之坑——渲染问题

最新推荐文章于 2024-08-22 17:29:05 发布

考研不如搬砖

最新推荐文章于 2024-08-22 17:29:05 发布

阅读量1.4w

点赞数 4

分类专栏：小程序员的前端之路

本文链接：https://blog.csdn.net/wmq1314lql/article/details/81750092

版权

在使用laydate.js时间插件时，遇到时间范围选择的问题，即结束时间需限制在开始时间之后。初始尝试通过动态修改max和min参数并重新渲染无效。经过研究发现，laydate.render()仅首次渲染有效，需通过设置startDate.config更新参数，或者删除并重新创建laydate实例来实现渲染。对于新版本laydate，直接修改配置更合适，避免内存占用过大。

摘要由CSDN通过智能技术生成

最近项目使用了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&