el-date-picker日期限定范围

el-date-picker日期限定范围

页面

<el-date-picker v-model="form.time" 
type="daterange" 
range-separator="至" 
start-placeholder="开始日期" 
end-placeholder="结束日期" 
:picker-options="pickerOptions"></el-date-picker>

设定时间不能超过前后范围不超过七天

// 限定日报时间选择范围
      timeOptionRange: '',
	    pickerOptions: {
	        onPick: time => {
      //当第一时间选中才设置禁用
      if (time.minDate && !time.maxDate) {
        this.timeOptionRange = time.minDate;
      }
      if (time.maxDate) {
        this.timeOptionRange = null;
      }
    },
    disabledDate: time => {
      let timeOptionRange= this.timeOptionRange;
      let secondNum = 60 * 60 * 24 * 6 * 1000;
      if (timeOptionRange) {
        return (time.getTime() > timeOptionRange.getTime() + secondNum ||time.getTime() <             
       timeOptionRange.getTime() - secondNum);
      }
    }
  },

限定时间不能超过三十天，且不能超过今天
把onpick里面的与disabledDate里面的替换掉

onPick: time => {
          // 选择开始时间未选择结束时间
          if (time.minDate && !time.maxDate) {
            this.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            this.timeOptionRange = null;
          }
        },
        disabledDate: time => {
          let timeOptionRange = this.timeOptionRange;
          let secondNum = 1000 * 60 * 60 * 24 * 7;
          if (!timeOptionRange) {
            return time.getTime() > Date.now() - 8.64e6
          }
          if ((timeOptionRange.getTime() + secondNum) > (Date.now() - 8.64e6)) {
            return time.getTime() > Date.now() - 8.64e6 || time.getTime() < timeOptionRange.getTime() - secondNum;
          }
          return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;
        }

扩展：
iview中的DatePicker 日期选择器限定范围：

使用它自身的options:options
 
 
options:{
         disabledDate (date) {
              return (date && date.valueOf() > Date.now() || date && date.valueOf() < Date.now()-2*365*24*60*60*1000);
          }

使日期选择框不能超过日期限定不能超过今天：
options1: {
        disabledDate: (date) => {
          if (this.endMonth) {
            let endDate = this.getDate(this.endMonth);
            return (date && date > endDate) || date > new Date();
          } else {
            return date && date > new Date();
          }
        },
      },

参考：

https://blog.csdn.net/qq_42527726/article/details/106550592?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-8.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-8.no_search_link
https://blog.csdn.net/qq_41619796/article/details/102595641