element-ui 时间日期选择器限制选择范围,限制时间为当前及当前两小时以前
时间: 2023-10-24 16:24:59 浏览: 160
可以通过设置 picker-options 属性来限制时间日期选择器的选择范围。
```
<el-date-picker
v-model="date"
:picker-options="pickerOptions">
</el-date-picker>
```
在 data 中定义 pickerOptions 属性,设置 disabledDate 和 disabledTime 方法来限制时间日期选择器的选择范围。
```
data() {
return {
date: '',
pickerOptions: {
disabledDate(time) {
const now = Date.now();
return time.getTime() > now || now - time.getTime() > 2 * 60 * 60 * 1000;
},
disabledTime(time) {
const now = new Date();
const twoHoursAgo = new Date(now.getTime() - 2 * 60 * 60 * 1000);
return time.getTime() > now.getTime() || time.getTime() < twoHoursAgo.getTime();
}
}
}
}
```
上述代码中,disabledDate 方法限制日期选择器的选择范围为当前日期及当前两小时以前。如果指定日期的时间戳大于当前时间戳或者指定日期与当前日期的时间差大于两小时,则该日期为不可选状态。
disabledTime 方法限制时间选择器的选择范围为当前时间及当前两小时以前。如果指定时间的时间戳大于当前时间戳或者指定时间的时间戳小于当前时间戳减去两小时的时间戳,则该时间为不可选状态。
阅读全文