element-ui中日期选择器，限制选择30天时间范围，且不大于当前时间， 时间范围只能选择1天

一、限制选择30天时间范围，且不大于当前时间

  <el-date-picker
     v-model="productForm.time"
     size="small"
     class="customDate"
     type="daterange"
     range-separator="~"
     :clearable="false"
     :picker-options="pickerOptions"
     @change="getTimeChange"
     value-format="yyyy/MM/dd"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
 ></el-date-picker>

data(){
    
    
  return{
    
    
	pickerMinDate: '', //获取开始选择时间
	pickerMaxDate: '', //获取结束选择时间
	pickerOptions: {
    
    
	//时间范围选择控制
	onPick: ({
     
      maxDate, minDate }) => {
    
    
		if (minDate) {
    
    
		this.pickerMinDate = minDate.getTime()
		}
		if (maxDate) {
    
    
		this.pickerMinDate = ''
		this.pickerMaxDate = maxDate.getTime()
		}
	},
	disabledDate: time => {
    
    
		const day32 = 32 * 24 * 3600 * 1000
		if (this.pickerMinDate !== '') {
    
    
		let maxTime = this.pickerMinDate + day32
		if (maxTime > new Date()) {
    
    
		  maxTime = new Date()
		}
		return time.getTime() > maxTime || time.getTime() > Date.now() - 86400000
		}
		if (this.pickerMaxDate !== '' && !this.pickerMinDate) {
    
    
		let minTime = this.pickerMaxDate - day32
		return time.getTime() < minTime || time.getTime() > Date.now() - 86400000
		}
		return time.getTime() > Date.now() - 86400000
		},
	},
  }
 }

二、未来时间不能选择

  <el-date-picker
     :picker-options="pickerOptions"
 ></el-date-picker>

data(){
    
    
  return{
    
    
   pickerOptions: {
    
    
     disabledDate(time) {
    
    
          return time.getTime() > Date.now() - 86400000 // 选当前时间之前的时间
      },
  },
	}
 }

链接: https://blog.csdn.net/qq_15827053/article/details/102500105.
链接: https://blog.csdn.net/weixin_52950296/article/details/111179477.
时间范围一天：链接: http://m.bubuko.com/infodetail-3720077.html.