【Element UI】 日期选择框 区间显示最近90天

element 日期选择框

官方文档： 日期时间选择器.

1.选择范围

<el-date-picker
   v-model="myTime"   // 默认展示时间
   type="daterange"   // 显示类型
   range-separator="-"
   @change="dateChange"
   value-format="timestamp"  //绑定值的格式   此处为时间戳 换其他类型看官方API文档
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :clearable="false"
   :picker-options="pickerOptions"   // 重点！！  定义区间选项
   :default-time="['00:00:00','23:59:59']"> // 选中日期后的默认具体时刻
</el-date-picker>

2.js部分

data () {
  return {
  	minTime: '',
	pickerOptions: {
	  onPick: ({ maxDate, minDate }) => {
	          // 当点击第一个时间时，参数中只有minDate表示选中时间，maxDate为null
	          // 当选中日期区间后，minDate 表示左区间的日期，maxDate 表示右区间的日期
	          this.minTime = minDate && minDate.setHours(0, 0, 0, 0) // 将第一个选中的日期赋值给 this.minTime
	          // 如果选择了时间段，则清空 this.minTime
	          if (maxDate) {
	            this.minTime = ''
	          }
	   },
	   disabledDate: (time) => {
	          const three = 90 * 24 * 3600 * 1000
	          if (this.minTime !== '') {
	            // 大于选中时间后90天 || 小于选中时间后90天 || 大于今天 的所有日期都禁用
	            return time.setHours(23, 59, 59, 0) > (this.minTime + three) || time.setHours(0, 0, 0, 0) < (this.minTime - three) || time.getTime() > new Date().setHours(23, 59, 59, 0)
	          } else {
	          // 什么都没选，只禁用大于今天的所有日期
	            return time.getTime() > new Date().setHours(23, 59, 59, 0)
	          }
	   }
  }
},
mounted ()  {
   const end = new Date().setHours(23, 59, 59, 0)
   const start = new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24 * 90
   this.myTime = [start, end]  // 默认展示当前时间往前90天
}

总结

此处只是以90天为例所写 可以根据不同的需求来更改时间！