el-date-picker中日期选择器时间限制，限制选择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 // 选当前时间之前的时间
      },
  },
	}
 }

三、时间范围在某一段时间内

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

data(){
  return{
	pickerOptions: {
	           disabledDate: time => {
	               return (
	                   time.getTime() < new Date(this.dayFrom).getTime() ||
	                   time.getTime() > new Date(this.dayTo).getTime()
	               )
	           },
	       },
		}
 }

四，时间范围是三个月

<el-form-item label="月份：" prop="time">
    <el-date-picker
        v-model="searchData.time"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="chooseDate"
        :picker-options="pickerOptions"
    ></el-date-picker>
</el-form-item>

startDate: '',
pickerOptions: {
    // onPick：选中日期时的回调函数，在这里对选中的日期进行处理{maxDate：后选中日期；minDate：第一个选中的日期}
    onPick: ({ maxDate, minDate }) => {
        this.startDate = minDate && minDate.getTime()
        if (maxDate) {
            // 选中后一个时，要把第一个的赋值清空
            this.startDate = ''
        }
    },
    disabledDate: time => {
        // 选中第一个后，后一个前后3个月可选，超出的不可选，超出当前天也不可选，这里的月份按需求设定
        const minTime = new Date(this.startDate).setMonth(
            new Date(this.startDate).getMonth() - 3
        )
        const maxTime = new Date(this.startDate).setMonth(
            new Date(this.startDate).getMonth() + 3
        )
        return (
            time.getTime() > Date.now() ||
            (this.startDate
                ? time.getTime() < minTime || time.getTime() > maxTime
                : false)
        )
    },
},

链接: 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.
链接: https://www.cnblogs.com/pzw23/p/13031924.html.
链接: https://www.cnblogs.com/jzyu/p/14626494.html