原文地址:【element】实现基于Element UI的日期范围选择:限制选定日期在30天内_daterange设置范围30天-CSDN博客
在Web应用开发过程中,我们经常遇到需要用户在一个特定日期范围内做出选择的场景。使用Element UI的el-date-picker组件,我们可以轻松实现这一功能。本文将指导你如何设置el-date-picker,使得用户选择的第二个日期必须在第一个日期的30天之内,并且限制不允许选择未来的日期。
1. 添加el-date-picker
组件
<el-date-picker
v-model="date2"
:format="'yyyy-MM-dd'"
:value-format="'yyyy-MM-dd'"
:picker-options="pickerOptions"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
2. 设置pickerOptions
在data函数中定义pickerOptions,包含disabledDate和onPick两个属性,用于控制日期的可选范围和处理用户的选择行为。
data() {
return {
selectDate: '', // 存储第一个选定日期的时间戳
pickerOptions: {
disabledDate: (time) => {
if (this.selectDate !== '') {
const oneDay = 24 * 3600 * 1000; // 一天的毫秒数
const thirtyDays = 30 * oneDay; // 30天的毫秒数
const minTime = this.selectDate - thirtyDays;
const maxTime = this.selectDate + thirtyDays;
let today = new Date();
today.setHours(0, 0, 0, 0); // 设置为今天的0点
// 限制可选日期:不可早于minTime,不可晚于maxTime和今天
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > today.getTime();
}
},
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate ? minDate.getTime() : '';
if (maxDate) {
this.selectDate = '';
}
},
}
};
},