小程序 日期组件实现功能（一个页面用到多个日期）

eg:

代码截图：wxml

js:

详细代码 wxml:

 <view class="box_top_one">
        <view class="title">  
        <view class="iconColor">*</view>
          加班时间
        </view>
        <view class="name addClassTime"  wx:for="{{AddClassTime}}" wx:key="index">
           <!-- 日期选择器 -->
          <view class="section">
            <picker mode="date" value="{{arrlist[index]}}" 
              bindchange="bindDateChange" data-index="{{index}}">
              <view class="picker">
              <input type="text" placeholder="请选择时间"  value="{{arrlist[index]}}" disabled="true"></input> 
              </view>
            </picker>
          </view>
        </view>
       
      </view>
      <view class="btnAddTimsBox" bindtap="addBtn">
        <image src="../../images/addBtn.png"></image>
        <view>点击添加更多时间</view>
      </view>

详细 JS:

/**
   * 页面的初始数据
   */
  data: {
  
    // 加班时间
    AddClassTime: [{
      one: '',
    }],
    arrlist: [], //加班时间数组
  },


  bindDateChange: function (e) {
    let index=e.target.dataset.index;
   //this.data.arrlist.push(e.detail.value);
   this.data.arrlist[index]=e.detail.value;
    this.setData({
      arrlist: this.data.arrlist
    })
  },
  addBtn() {
    this.data.AddClassTime.push({
      one: ''
    });
    this.setData({
      AddClassTime: this.data.AddClassTime
    })
  },