当前位置：首页 > news >正文

el-date-picker设置时间范围

news 2025/6/30 16:53:25

下面这种写法会报错：找不到expirationDate，这是因为涉及到this的指向问题
在普通函数中，this 的上下文并不指向 Vue 组件实例，而是取决于函数的调用方式或者是否使用了严格模式

<el-date-pickerclass="date-icon-common"v-model="expireTime"type="date"value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择日期":picker-options="pickerOptions">
</el-date-picker>
data() {return {expirationDate: '2024-06-30 00:00:00', // 到期时间pickerOptions: {disabledDate(date) {// 禁用过去日期if (date.getTime() < Date.now() - 8.64e7) {return true;}// 禁用期限日期之后的日期console.log('打印找不到this'，this)const expirationDateTimestamp = new Date(this.expirationDate).getTime();if (date.getTime() > expirationDateTimestamp) {return true;}return false;}}}
}

✅两种改法
1️⃣使用箭头函数: 箭头函数不会创建自己的 this 上下文，而是从定义时的外层作用域继承 this。修改你的 disabledDate 方法为箭头函数可以解决这个问题，如下所示：

data() {return {expirationDate: '2024-06-30 00:00:00',pickerOptions: {disabledDate: (date) => {// 禁用过去日期if (date.getTime() < Date.now() - 8.64e7) {return true;}// 获取期限日期的时间戳const expirationDateTimestamp = new Date(this.expirationDate).getTime();// 禁用期限日期之后的日期if (date.getTime() > expirationDateTimestamp) {return true;}return false;}}};
}

2️⃣使用计算属性

data() {return {expirationDate: '2024-06-30 00:00:00'};
},
methods: {dateDisabled(date) {// 禁用过去日期if (date.getTime() < Date.now() - 8.64e7) {return true;}// 获取期限日期的时间戳const expirationDateTimestamp = new Date(this.expirationDate).getTime();// 禁用期限日期之后的日期if (date.getTime() > expirationDateTimestamp) {return true;}return false;}
},
computed: {pickerOptions() {return {disabledDate: this.dateDisabled};}
}