element ui DatePicker 日期选择器 限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态

picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期

time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数

Date.now()是把今天的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数,这样比较好比较

这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7

 return time.getTime() <= Date.now()

 1、element ui DatePicker 日期选择器 限制只能选择今天之前或者之后

<el-date-picker
    v-model="exCheckDate"
    type="date"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd"
    placeholder="请选择时间">
  </el-date-picker>


data (){ 
   return {
     exCheckDate：'',
     pickerOptions: { 
         disabledDate(time) {
            //选择今天以及今天之后的日期 
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择
            //选择今天以及今天之前的日期 
            return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
         }
  	},
  }
 }

 

value-format属性是改变v-model上值的格式，例如：

value-format=“yyyy-MM-dd” //2022-05-31
value-format=“yyyy-MM-dd HH:mm:ss” //2022-05-31 00:00:00
value-format=“timestamp” // 1483326245000

 2、两个日期选择器的范围限制

2-1 开始时间只能选中当月的日期，结束时间选择开始时间选中的日期或者之后的当月内时间

如果开始时间为当月的最后一天，结束时间只能为今天

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>

// 开始时间只能选中当月的日期，结束时间选择开始时间选中的日期或者之后的当月内时间
// 如果开始时间为当月的最后一天，结束时间只能为今天
  pickerOptions0: {
     disabledDate: (time) => {
       if (this.value2) {
         return time.getTime() > Date.now() || time.getTime() > this.value2;
       } else {
            return time.getTime() > Date.now();
        }
      }
   },
   pickerOptions1: {
      disabledDate: (time) => {
         return time.getTime() < this.value1 || time.getTime() > Date.now();
      }
   },

2-2 开始时间只能选中当月或者之前的日期，结束时间选择开始时间选中的日期或者之后的时间

如果开始时间为当月的最后一天，结束时间只能为今天或者之后的日期

pickerOptions0: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() > this.value2
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
  pickerOptions1: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() < this.value1
            }
            return time.getTime() < Date.now()
          }
        },