
ElementUI日期选择器:如何限制结束日期在开始日期后12个月内?
本文介绍如何在ElementUI日期选择器中,限制结束日期必须在开始日期后的12个月以内。
方法:利用el-date-picker组件的pickerOptions属性中的disabledDate函数,对日期进行筛选。
示例代码:
export default {
data() {
return {
value: '',
pickerOptions: {
disabledDate: (time) => {
const startDate = this.value ? new Date(this.value[0]) : null; // 获取开始日期
if (!startDate) return false; // 开始日期未选择则不限制
const twelveMonthsLater = new Date(startDate);
twelveMonthsLater.setFullYear(twelveMonthsLater.getFullYear() + 1); // 计算开始日期后12个月
return time.getTime() >= twelveMonthsLater.getTime(); // 超过12个月则禁用
}
}
};
}
};
此代码通过disabledDate函数,动态计算开始日期后12个月的时间点,并禁用超过该时间点的日期。 如果未选择开始日期,则不进行任何限制。 建议使用dayjs或moment.js等日期处理库来简化日期计算,提高代码可读性和可维护性。










