2019-05-31 laydate 动态生成页面后每个子页面初始化时间插件

因为我的是总清单，然后点击后里面生成苗木页面（默认有一个苗木），他们关系是1对多，总清单结束时间默认是当天，苗木的结束时间不能超过总清单的结束时间

添加苗木下面有添加苗木按钮

js

代码开始：

#初始化清单上的结束时间

var endTime = laydate.render({

        elem: '#endTime', //选择需要初始化时间控件的元素（dom或者JQdou 都可以）

        min: getNowFormatDate() - 1,//设置一个默认最大值

        value: new Date(), //设置默认值

        done: function(value,date){ //添加回调事件

            laydateDestory() //调用销毁所有苗木里结束时间控件方法

            for (let i = 0; i < $(".endTime").length; i++) {

                if ($(".endTime")[i].value >= value) {

                    console.log($(".endTime")[i].value)

                    laydate.render({

                        elem: $(".endTime")[i],

                        min: getNowFormatDate() - 1,//设置一个默认最小值

                        max: $("#endTime").val(),

                        value: $("#endTime").val(),

                    });

                }else {

                    console.log($(".endTime")[i].value)

                    laydate.render({

                        elem: $(".endTime")[i],

                        min: getNowFormatDate() - 1,//设置一个默认最小值

                        max: $("#endTime").val(),

                    });

                }

            }

        }

    });

//页面加载时，初始化第一个苗木的时间控件

    $(function () { 

        addTimePlugs()

    })

//为每个最后动态生成的页面里的结束时间初始化时间控件

    function addTimePlugs() {

        laydate.render({

            elem: $('.endTime')[$('.endTime').length - 1],

            min: getNowFormatDate() - 1,//设置一个默认最大值

            max: $("#endTime").val(),

            value: $("#endTime").val(),

        });

    }

//获取当前时间

    function getNowFormatDate() {

        var date = new Date();

        var seperator1 = "-";

        var seperator2 = ":";

        var month = date.getMonth() + 1;

        var strDate = date.getDate() + 1;

        if (month >= 1 && month <= 9) {

            month = "0" + month;

        }

        if (strDate >= 0 && strDate <= 9) {

            strDate = "0" + strDate;

        }

        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

            + " " + date.getHours() + seperator2 + date.getMinutes()

            + seperator2 + date.getSeconds();

        return currentdate;

    }

//销毁所有的苗木里结束时间控件的方法

    function laydateDestory() {

        var endTimeClone = $(".endTime").clone(true);//复制所有苗木页面节点（复制后的是没有时间控件的，不过有lay-key属性）

        for (var i = 0; i < endTimeClone.length; i++) {

            $(endTimeClone[i]).attr("lay-key",null)  //每次初始化时间控件会自动生成一个lay-key的值，复制时把此值也复制了，所以需要清空此值

            $(".endTime").get(i).replaceWith(endTimeClone[i])//替换页面节点

        }

    }

js代码结束

动态生成页面后页面加载控件调用addTimePlugs()方法 生成控件

#endTime初始化时增加事件，如果值改变回调后先销毁所有的（.endTime)控件，再生成新的控件

后面是整个页面代码：

@layout("/common/_container.html"){

    .purchase_add_sin {

padding:20px;

        box-sizing:border-box;

        position:relative;

    }

.purchase_add_sin >div {

background:#f3f2f2;

    }

.purchase_add_single {

}

.purchase_add_single_span {

vertical-align:middle;

        display:inline-block;

        width:12.5%;

        font-size:13px;

        font-weight:700;

        text-align:right;

        padding:20px 10px 20px 0;

        box-sizing:border-box;

    }

.purchase_add_single_div {

width:85%;

        display:inline-block;

        padding:20px 0;

    }

.purchase_add_single_div input {

background-color:#FFFFFF;

        background-image:none;

        border:1px solid #e5e6e7;

        border-radius:1px;

        margin-right:20px;

        color:inherit;

        padding:6px 12px;

    }

.purchase_add_single_div p {

width:100%;

    }

.purchase_add_single_div p span {

display:inline-block;

        width:12.5%;

        font-size:13px;

        text-align:right;

        padding:10px 10px 10px 0;

        box-sizing:border-box;

    }

.purchase_add_single_div p input {

margin-right:0;

        width:100px;

    }

.purchase_add_single_div_list p {

margin-top:20px;

    }

.purchase_add_single_div_list p span {

display:inline;

    }

.purchase_add_single_div_list p span i {

font-style:normal;

        margin-right:10px;

        padding:5px 10px;

        cursor:pointer;

    }

.purchase_add_single_div_list p span i.active {

background:#ccc;

        color:#ffffff;

        border-radius:3px;

    }

textarea {

resize:none

    }

.detele_btn {

display:inline-block;

        position:absolute;

        right:30px;

        top:30px;

        padding:10px;

        background:#b1b1b1 !important;

        border-radius:3px;

        color:#ffffff;

        cursor:pointer;

    }

.select_btn {

display:inline-block;

        padding:6px 12px;

        background:#b1b1b1 !important;

        border-radius:3px;

        color:#ffffff;

        cursor:pointer;

    }

.treeName{position:absolute;

        background:#ffffff;

        width:200px;    max-height:250px;

        overflow-y:auto;}

.treeName p{padding:5px;border-bottom:1px solid #f3f3f3;cursor:pointer;}

.col-sm-12{border-bottom:1px solid #efefef;}