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>