1. 日期选择器,当前日期之后的日期不可选择,且日期最多可选择30天
<el-date-picker
v-model="time"
type="daterange"
range-separator="-"
start-placeholder="请选择时间"
end-placeholder="请选择时间"
format='yyyy-MM-dd'
value-format='yyyy-MM-dd'
:picker-options="pickerOptions">
</el-date-picker>
data() {
return {
time: '',
pickerOptions: {
onPick: ({maxDate, minDate}) => {
this.pickerMinDate = minDate.getTime();
},
disabledDate: (time) => {
if (this.pickerMinDate) {
const one = 30 * 24 * 3600 * 1000;
const minTime = this.pickerMinDate - one;
let maxTime = '';
if (Date.now() > this.pickerMinDate + one) {
maxTime = this.pickerMinDate + one;
} else {
maxTime = Date.now();
}
return time.getTime() < minTime || time.getTime() > maxTime;
}
return time.getTime() > Date.now();
}
}
}
}
2. 选择某个日期之后的数据
例如:2023年9月1日之后的日期可选,包括9月1日
pickerOptions: {
disabledDate: function(time) {
return time.getTime() < new Date('2023-08-31').getTime();
}
}
后续其他的范围问题会继续更新~