Layui laydate组件重新渲染的问题

在使用 Layui 作为前端开发框架的时候, 需要用到时间组件 laydate 输入一些时间内容的表单, 如：

laydate.render({
    elem: "#establish",
    type: "date",
    trigger: 'click',
    showBottom: false,
    done: function (value) {
        laydate.render({
            elem: "#accomplish",
            type: "date",
            trigger: 'click',
            showBottom: false,
            min: value,
        });
        form.render('select');
    }
});

这段组件的配置是在选择了 #establish 开始时间后, 对结束时间做一个最小值的设置 min: value, 而 value 是开始时间在选择时间后的回调函数 done: function(){} 返回传递的字符串值, 但是在实际中这段代码并不能运行达到预期的效果。

在时间模块首次渲染完成后, 并不能对齐进行修改式的渲染。

所以如果想达到预期的效果, 你需要这样：

laydate.render({
    elem: "#establish",
    type: "date",
    trigger: 'click',
    showBottom: false,
    done: function (value) {
        document.getElementById('accomplish-box').innerHTML = '<input class="layui-input" placeholder="结项时间" autocomplete="off" id="accomplish" name="accomplish" required lay-verify="required">';
        laydate.render({
            elem: "#accomplish",
            type: "date",
            trigger: 'click',
            showBottom: false,
            min: value,
        });
        form.render('select');
    }
});

唯一的不同就是在回调函数的里面, 首先执行 HTML 的重新渲染, 将旧的时间组件擦除, 在对其渲染, 即可实现你的需求。

该代码片段在 M&OAS-Front 项目中 menu/report 版块的 add-suject.html 中可以查阅完整代码, 如果你看到没有该文件, 可能作者还未将代码同步至 Github, 深感歉意！