el-date-picker限制选择的日期段，设置picker-options失效

最新推荐文章于 2025-11-17 15:02:15 发布

原创最新推荐文章于 2025-11-17 15:02:15 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文探讨了如何在Element UI的el-date-picker组件中限制用户只能选择一个月的时间范围。通过使用picker-options参数配合change事件监听，实现了有效的时间区间限制。

el-date-picker设置了以下的picker-options参数，没有实现限制选择一个月的效果：

<el-date-picker v-model="SNData.date"
unlink-panels
clearable
type="datetimerange"
size="small"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
:editable="false">
</el-date-picker>

data() {
return {

selectDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime()
if (maxDate) {
this.selectDate = ''
}
},
disabledDate: (time) => {
if (this.selectDate !== '') {
const one = 30 * 24 * 3600 * 1000
const minTime = this.selectDate - one
const maxTime = this.selectDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
},

}

大家有没有可以解决的方案？

后面通过change事件，做了一个伪功能提示报错信息，代码如下：

<el-date-picker v-model="SNData.date"
unlink-panels
clearable
type="datetimerange"
size="small"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="changeTime"
:editable="false">
</el-date-picker>

data() {
return {
SNData: {
date: '',
enddate: '',
model: '',
},
selectDate: '',
createStartDate: '',
createEndDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime()
if (maxDate) {
this.selectDate = ''
}
},
disabledDate: (time) => {
if (this.selectDate !== '') {
const one = 30 * 24 * 3600 * 1000
const minTime = this.selectDate - one
const maxTime = this.selectDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
},
};
},

methods: {
changeTime() {
if (this.SNData.date) {
this.createStartDate = parseTime(new Date(this.SNData.date[0]), '{y}-{m}-{d} {h}:{m}:{s}');
this.createEndDate = parseTime(new Date(this.SNData.date[1]), '{y}-{m}-{d} {h}:{m}:{s}');
const numDays = (new Date(this.SNData.date[1]).getTime() - new Date(this.SNData.date[0]).getTime()) / (24 * 3600 * 1000);
if (numDays > 30) {
this.$alert('时间范围不能超过一个月，请重新选择！', '警告', {
confirmButtonText: '确定',
});
this.SNData.date = null;
this.createStartDate = '';
this.createEndDate = '';
}
} else {
this.createStartDate = '';
this.createEndDate = '';
}
}
},