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

需求说明：如下图所示，点击循环周期选择不同类型循环周期，时间区间根据循环周期进行动态变化，若是选择周和月，时间区间可以通过点击加号动态增加多个

功能要点：用户需要能根据自己需要动态创建多个时间选择器

后端的需要的数据格式为

malltRightsLoopInfoList: [{
      loopType: '',    //循环周期
      loopCfg: '',     //星期或月份
      obtainBeginDatePart: '',  //开始时间
      obtainEndDatePart: ''     //结束时间
}]

这里先初始化malltRightsLoopInfoList，再根据循环周期的点击来重新初始化，并根据的malltRightsLoopInfoList值将laydate时间选择器初始化，若是选择的周或月，用户点击添加时间区间时重新给malltRightsLoopInfoListpush一个对象，并重新初始化laydate

HTML

<div class="col-6">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names">
              <span class="c-form-nonull">*</span>循环周期
            </p>
            <div class="c-form-info">
              <label class="c-radio {
    {malltRightsLoopInfoList[0].loopType == '0' ? 'choice' : ''}} mgr-l" on-click="selectCircle('0')">
                <i></i>
                <span>不循环</span>
              </label>
              <label class="c-radio {
    {malltRightsLoopInfoList[0].loopType == '1' ? 'choice' : ''}} mgr-l" on-click="selectCircle('1')">
                <i></i>
                <span>日</span>
              </label>
              <label class="c-radio {
    {malltRightsLoopInfoList[0].loopType == '2' ? 'choice' : ''}} mgr-l" on-click="selectCircle('2')">
                <i></i>
                <span>周</span>
              </label>
              <label class="c-radio {
    {malltRightsLoopInfoList[0].loopType == '3' ? 'choice' : ''}} mgr-l" on-click="selectCircle('3')">
                <i></i>
                <span>月</span>
              </label>
            </div>
          </div>
        </div>
        <div
          class="col-6"
          s-show="malltRightsLoopInfoList[0].loopType == '0'"
          style="height: 60px"
        ></div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '1'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <span class="data-spn" style="width: 25%;font-size: 12px;padding: 0 10px;text-align: center;">每天</span>
              <input
                autocomplete="off"
                placeholder="开始时间"
                id="{
    {
    'date' + index}}"
                class="ipt-date layer_time"
                style="width: 28%"
                value="{= mrl.obtainBeginDatePart =}"
              />
              —
              <input
                autocomplete="off"
                placeholder="结束时间"
                id="{
    {
    'dateend' + index}}"
                class="ipt-date layer_endtime"
                style="width: 28%"
                value="{= mrl.obtainEndDatePart =}"
              />
            </div>
          </div>
        </div>
        <div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '2'">
          <div class="c-form-item mgb-xl">
            <p class="c-form-names" title="">
              <span class="c-form-nonull">*</span>时间区间
            </p>
            <div class="c-form-info"  s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
              <select
                value