layui 动态添加多个日期选择控件

作为 layui 2.0 的核心组成之一，layDate 也是今非昔比了。
看到这么简洁的界面和完善的文档我反手就是一个赞！
页面中有一两个日期选择器的时候，处理还比较方便。
详细请见官方文档：https://www.layui.com/doc/modules/laydate.html
当我们在同一个表单中初始化多个日期时，可能会遇到一些问题。
诸如下图此类情况：
初始状态下只有这一行数据

当我们点击新增按钮时会添加一行

我最初的思路是动态拼接id值，比如在id的后面的加一个变量，变量值随着每次的新增而增加，但是在当前这种场景下使用这种方式还是有点繁琐。
下面呢就通过一个简单的例子详细介绍下实现过程:

html

<table>
    <thead>
        <tr>
            <th>开始时间</th>
            <th>结束时间</th>
        </tr>
    </thead>
    <form action="">
    <tbody id="tableContent">
    <tr>
        <td><input type="text" class="layui-input datetime" placeholder="yyyy-MM-dd"></td>
        <td><input type="text" class="layui-input datetime" placeholder="yyyy-MM-dd"></td>
    </tr>
    </tbody>
    </form>
</table>

js

<script src="/xxx/layui.js"></script>
<script>
//主要是用到laydate
layui.use( 'laydate', function () {
    var laydate = layui.laydate;
    //核心方法
    function timeAdd(){
         lay('.datetime').each(function() {
             laydate.render({
                 elem : this,
                 trigger : 'click'
             });
         });
     }
     //初始化时先调用一次，确保静态的那一行可点
     timeAdd();
     //给新增按钮添加点击事件
     $('.addBtn').click(function(){
         tableHtml2 = "<tr>
        <td><input type='text' class='layui-input datetime' placeholder='yyyy-MM-dd'></td>
        <td><input type='text' class='layui-input datetime' placeholder='yyyy-MM-dd'></td>
    </tr>";
         $("#tableContent").append(tableHtml)
         form.render(); 
         timeAdd()
     })
})
</script>

大体的意思基本就是这些了，总之一句话，重点关注timeAdd()方法的调用。