iview datetime日期时间限制

 

<template>
<div>
<span>
              <label>选择时间：</label>
              <DatePicker
                v-model="dateTimePicker[0]"
                type="datetime"
                @on-change="startTimeChange"
                :options="startTimeOptions"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"></DatePicker>
                ~
              <DatePicker
                v-model="dateTimePicker[1]"
                type="datetime"
                @on-change="endTimeChange"
                :options="endTimeOptions"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间"></DatePicker>
            </span>
</div>
</template>

<script>
export default {
methods: {
// 重置
    reset() {
      this.dateTimePicker = ['', ''];
      this.startTimeOptions = {
        disabledDate: date => {
          return ''
        }
      }
      this.endTimeOptions = {
        disabledDate: date => {
          return ''
        }
      }
},
startTimeChange: function(e) { //设置开始时间
      /*
        1.当结束时间为空或小于开始时间时，设置结束时间等于开始时间
        2.根据开始时间设置结束时间的disabled日期
          结束时间的不可选日期节点：
            1) 开始时间为00:00:00时 => 开始时间的00:00:00 - 1，即前一天的23:59:59
            2) 开始时间不等于00:00:00时 => 前一天?
      */
      if(!e) return false
      if(!this.dateTimePicker[1] || new Date(this.dateTimePicker[1]).valueOf() < new Date(e).valueOf()) {
        this.dateTimePicker[1] = e;
      }
      // let startTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
      let endDisTime = 0; // 结束时间不可选时间节点
      let fristMS = new Date(new Date(e).toLocaleDateString()).valueOf(); // 开始时间的 00:00:00的毫秒数
      if(fristMS == new Date(e).valueOf()) { // 开始时间为00:00:00
        endDisTime = new Date(new Date(e).toLocaleDateString()).valueOf() - 1;
      } else {
        endDisTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
      }
      this.endTimeOptions = {
        disabledDate: date => {
          return date && (date.valueOf() < endDisTime);
        }
      }
    },
    endTimeChange: function(e) { //设置结束时间
      let _this = this;
      let flag = false;
      // console.log(new Date(new Date(this.dateTimePicker[0]).toLocaleDateString()),new Date(new Date(e).toLocaleDateString()))
      if(!e || !this.dateTimePicker[0]) return false
      let endTime = new Date(e).valueOf();
      let startTime = new Date(this.dateTimePicker[0]).valueOf();
      if(startTime > endTime) {
        this.dateTimePicker[1] = this.dateTimePicker[0]
        flag = true
      }
      // let endTimepre = endTime + 1 * 24 * 60 * 60 * 1000;
      let endTimepre = new Date(new Date(e).toLocaleDateString()).valueOf() + 1 * 24 * 60 * 60 * 1000 - 1;
      this.startTimeOptions = {
        disabledDate(date) {
          return date && (flag ? '': date.valueOf() > endTimepre);
          // return date.valueOf() < startTime;
        }
      }
    },
}
}

</script>