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-pickerv-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” //-05-31
value-format=“yyyy-MM-dd HH:mm:ss” //-05-31 00:00:00
value-format=“timestamp” // 1483326245000
2、两个日期选择器的范围限制
2-1 开始时间只能选中当月的日期，结束时间选择开始时间选中的日期或者之后的当月内时间
如果开始时间为当月的最后一天，结束时间只能为今天
<el-date-pickerv-model="value1"type="date"placeholder="开始日期":picker-options="pickerOptions0"></el-date-picker><el-date-pickerv-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()}},
element ui DatePicker 日期选择器 限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态
