el-date-picker,disabled-date使用例,要求只能选择今天之前的日期
时间: 2023-07-24 16:09:27 浏览: 73
element-ui 限制日期选择的方法(datepicker)
假设您使用的是 ElementUI 的 DatePicker 组件,那么可以通过 disabledDate 属性来限制日期选择范围。以下是一个示例代码:
```vue
<template>
<el-date-picker
v-model="date"
:disabled-date="disabledDate"
type="date"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: null,
pickerOptions: {
disabledDate: this.disabledDate
}
};
},
methods: {
disabledDate(time) {
// 如果当前日期大于等于今天,则禁止选择
const today = new Date();
return time.getTime() >= today.getTime();
}
}
};
</script>
```
在上面的代码中,我们在 data 中定义了一个 date 变量来存储选中的日期,以及一个 pickerOptions 变量来指定一些选项。其中,我们将 disabledDate 属性指定为一个方法 disabledDate。
在 disabledDate 方法中,我们接收一个参数 time,它代表了当前的日期。我们通过 new Date() 获取了当前时间,并将其与 time 比较。如果 time 大于等于今天,则禁止选择,否则允许选择。
最后,我们在 el-date-picker 中指定 v-model 将选中的日期绑定到 date 变量上,并将 pickerOptions 作为 picker-options 属性传入,即可实现只能选择今天之前的日期的功能。
阅读全文