iview时间范围设置

一、两个输入框
<template>
 
             <Row>
              <Col span="11">
                <Form-item label="登记时间" prop="inputTime">
                  <DatePicker
                    :value="caseInfo.inputTime"
                    :options="disabledInputTime"
                    @on-change="changeAcceptTime"
                    type="date"
                    placeholder="请选择登记时间"
                    style="width: 220px"
                  ></DatePicker>
                </Form-item>
              </Col> 
              <Col span="12">
                <Form-item
                  label="案件侦办到期时间"
                  prop="casespyEndtime"
                  :label-width="185"
                >
                  <DatePicker
                    :value="caseInfo.casespyEndtime"
                    :options="disabledCasespyEndtime"
                    @on-change="changeEndtime"
                    type="date"
                    placeholder="请选择到期时间"
                    style="width: 220px"
                  ></DatePicker>
                </Form-item>
              </Col>
           </Row>
 
</template>

<script>

function getCurrentDate() {
  let myDate = new Date();
  let year = myDate.getFullYear();

  let month = myDate.getMonth() + 1;
  let date = myDate.getDate();

  let nowDate = `${year}-${month}-${date}`;
  return nowDate;
}
let currentDate = getCurrentDate();
let disabledDay = GetNextMonthDay(currentDate, 6);
let disabledDayTime = new Date(disabledDay).getTime();

/**
 *获取下一个月的输入日期
 *{param:DateTime} date 输入日期(YYYY-MM-DD)
 *{param:number } monthNum 月数
 */
function GetNextMonthDay(date, monthNum) {
  var dateArr = date.split("-");
  var year = dateArr[0]; //获取当前日期的年份
  var month = dateArr[1]; //获取当前日期的月份
  var day = dateArr[2]; //获取当前日期的日
  var days = new Date(year, month, 0);
  days = days.getDate(); //获取当前日期中的月的天数
  var year2 = year;
  var month2 = parseInt(month) + parseInt(monthNum);
  if (month2 > 12) {
    year2 =
      parseInt(year2) +
      parseInt(parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12);
    month2 = parseInt(month2) % 12;
  }
  var day2 = day;
  var days2 = new Date(year2, month2, 0);
  days2 = days2.getDate();
  if (day2 > days2) {
    day2 = days2;
  }
  if (month2 < 10) {
    month2 = "0" + month2;
  }

  var t2 = year2 + "-" + month2 + "-" + day2;
  return t2;
}
export default {
  name: "ControlCaseList",
 
  data() {
    return {
     
      caseInfo: {
      
        inputTime: currentDate,
        casespyEndtime: disabledDay,
       
      },
      disabledInputTime: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      disabledCasespyEndtime: {
        disabledDate(date) {
          return (
            (date && date.valueOf() < Date.now() - 86400000) ||
            date.valueOf() > disabledDayTime
          );
        },
      },
    
      
      
     
    }
  },
  methods: {
    changeAcceptTime(value) {
      this.caseInfo.inputTime = value;
    },

    changeEndtime(value) {
      this.caseInfo.casespyEndtime = value;
    },

  
    
  },

  mounted() {
   
  },

  watch: {
   
    "caseInfo.inputTime"() {
      let self = this;
      this.disabledCasespyEndtime = {
        disabledDate(date) {
          if (self.caseInfo.inputTime) {
            return (
              (date &&
                date.valueOf() < new Date(self.caseInfo.inputTime).getTime()) ||
              date.valueOf() > disabledDayTime
            );
          }
        },
      };
    },
    "caseInfo.casespyEndtime"() {
      let self = this;
      this.disabledInputTime = {
        disabledDate(date) {
          if (self.caseInfo.casespyEndtime) {
            return (
              date &&
              (new Date(self.caseInfo.casespyEndtime).getTime() <
                date.valueOf() ||
                date.valueOf() < Date.now() - 86400000)
            );
          }
        },
      };
    },
  },
};
</script>

二、一个输入框网上找的
<DatePicker ref="date" @click.native="onPick" type="datetimerange" :options = "options"   placeholder="请选择日期" :clearable="false" v-model="searchDate" style="width: 280px;margin-right: 10px"></DatePicker>
// 动态限制日期时间选择器的可选范围
 function disabledDate_start_end_native(value, from) {
  const startTime = new Date(from);
  const endTime = new Date(from);
  startTime.setDate(from.getDate());
  endTime.setDate(from.getDate() + 6);
  return !(value >= startTime && value <= endTime) || (value && (value.valueOf() > Date.now() - 86400000));
}

 methods:{
      //设置时间
      onPick() {
          const target = (this.$refs.date).$refs.pickerPanel;
          console.log('target', target)
          const { from, to } = target.rangeState;
          target.handlePickClick = (() => {
            const selecting = target.rangeState;
            const from1 = target.rangeState.from;
            if (from1 && selecting) {
              this.options = {
                disabledDate(value) {
                  return disabledDate_start_end_native(value, from1);
                },
              };
            }
          });
          if (from && !to) {
            this.options = {
              disabledDate(value) {
                return disabledDate_start_end_native(value, from);
              },
            };
          } else {
            this.options = {
              disabledDate(value) {
                return value && (value.valueOf() > Date.now() - 86400000);
              },
            };
          }
        
      },
}，
data() {
  return {
      options:{
          disabledDate (date) {
            return date && date.valueOf() > new Date();
          }
        },  
      //开始时间，结束时间
        searchDate:[],
}  
}