LAYUI前框框架laydate日期组件重新渲染

LayDate

之前项目后端使用LAYUI进行开发，因动态的新增需求，需要重新渲染LAYDATE日期组件框，奈何一直没有寻找到解决方案。仔细调试网页后，找到了另外一条相对方便快捷的重新渲染方法

网页代码

1.先引入所需资源

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js">script>
<script src="./jquery-2.2.2.js">script>

2.往body内添加内容

<div class="addBox" style="background-color: #eee;padding:10px;margin:10px 0px;">
    <div class="layui-row tims">
        <div class="layui-col-xs4">
            <label><span style="color: red">* span>时间label>
        div>
        <div class="layui-col-xs8">
            <input type="text" autocomplete="off" class="startTime layui-input laydate" placeholder="yyyy-MM-dd HH:ii">
        div>
    div>
div>

<div class="layui-row" style="height: 30px;">
    <div class="layui-col-xs5"> div>
    <div class="layui-col-xs2">
        <div id="addLine" style="cursor: pointer;text-align: center;line-height: 30px;">添加一行div>
    div>
div>

<div class="layui-row">
   <div class="layui-col-xs12" style="text-align: center">
        <button class="layui-btn btn-add" style="width: 180px" type="button">新增button>
    div>
div>

网页js

<script>
//这里是新增日期组件触发的事件
	$("#addLine").click(function () {
		//先获取最后一个laydate的标识
        var lay_index = ($(".laydate:last").attr("lay-key"))*1 + 1;
        //往网页内新增一个
        $(".addBox:last").after($(".addBox:last").prop("outerHTML"));
        //初始化校验菜单
        //重新赋值新的lay-key
        $(".laydate:last").attr("lay-key",lay_index);
        //重新渲染新的lay-date组件
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            lay('.laydate').each(function(){
                laydate.render({
                    elem: this,
                    format:"yyyy-MM-dd HH:mm",
                    trigger: 'click',
                    type:"datetime"
                });
            });
        });
    });
    //这里可以取消掉注释输出所有的值
    //调试输出每个日期的值
    // $(".btn-add").click(function(){
    // 	$.each($(".laydate"),function(index,row){
    // 		console.log($(".laydate:eq("+index+")").val());
    // 	})
    // });
    
    //调试输出所有不为空日期组件的值
    $(".btn-add").click(function(){
    	$.each($(".laydate"),function(index,row){
    		if ($(".laydate:eq("+index+")").val() == "" || $(".laydate:eq("+index+")").val() == null) {
    			
    		}else{
    			//不为空
    			console.log($(".laydate:eq("+index+")").val());
    		}
    	})
    });
    //网页第一步会渲染所有的日期组件
    //这里是加载后调用的第一个方法
	layui.use('laydate', function(){
        var laydate = layui.laydate;
        //对每个laydate
        lay('.laydate').each(function(){
            laydate.render({
                elem: this,
                format:"yyyy-MM-dd HH:mm",
                trigger: 'click',
                type:"datetime"
            });
        });
    });
 </script>

完结

网上一直没有寻找到比较合适的方案，以此来说，这个可以说是网上最快的解决方式了。
解决过程就不一一赘述了，主要原因在于laydate渲染后所附带的lay-index会被载入缓存（个人理解）
所以再次渲染时，不会重新去渲染。所以修改lay-index标识的值，让它在渲染器眼里变成一个新的组件。
即可去重新渲染它。

资源下载

这次所写的代码都已打包至OSS上，需要的可以下载测试
OSS国内下载地址
GitHub下载地址