iView中的DatePicker日期选择控件（开始时间和结束时间约束，结束时间加一天）

前言：最近做项目需要用到日期选择控件，来做个总结，其中包括开始时间和结束时间的约束，直接上代码（Vue项目）

实现效果图：

template：

<span class="item">
          检测时间：
          <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholder="开始日期" v-model="startDate" style="width: 130px"></DatePicker> —
          <DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" placeholder="结束日期" v-model="endDate" style="width: 130px"></DatePicker>
 </span>

data：

startDate: "",
endDate: "",
startTimeOptions: {}, //开始日期约束
endTimeOptions: {}, //结束日期约束

methods：

// 设置开始时间
startTimeChange: function(e) { 
      this.startDate = e
      this.query.timeFrom.value = this.startDate
      let startTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : ''
      this.endTimeOptions = {
        disabledDate(date) {
          return date && (date.valueOf() < startTime)
        }
      }
  },
 
  // 设置结束时间
endTimeChange: function(e) { 
     this.endDate = e
     // 发现筛选时不包括结束时间，为了符合需求，对结束时间进行了‘加一天’操作
     this.query.timeTo.value = this.getNewDay(e, 1)
     let endTime = e ? new Date(e).valueOf() : ''
     // 点击控件自带清除按钮后，endTime='', 无法先选择开始日期，所以将endTime暂时赋值为当前时间
     if (endTime === '') {
       endTime = Date.now()
     }
     this.startTimeOptions = {
       disabledDate(date) {
         return date && (date.valueOf() > endTime)
       }
     }
 },
 
 // js 实现YYYY-MM-DD日期加上天数得到新的日期
    getNewDay(dateTemp, days) {
        var dateTemp = dateTemp.split("-");
        var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); //转换为MM-DD-YYYY格式
        var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
        var rDate = new Date(millSeconds);
        var year = rDate.getFullYear();
        var month = rDate.getMonth() + 1;
        if (month < 10) month = "0" + month;
        var date = rDate.getDate();
        if (date < 10) date = "0" + date;
        return (year + "-" + month + "-" + date);
  },