在vue2中使用el-date-picker组件中的:disabled-date属性,将除了数组dates: ["2023-05-23", "2023-05-22", "2023-05-19"],以外的日期都置为不可选中状态,请给出代码示例
时间: 2024-02-09 19:12:45 浏览: 121
好的,下面是一个简单的代码示例:
```
<template>
<el-date-picker
v-model="date"
:disabled-date="disabledDate"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: '',
dates: ["2023-05-23", "2023-05-22", "2023-05-19"]
};
},
methods: {
disabledDate(date) {
return this.dates.indexOf(this.formatDate(date)) === -1;
},
formatDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
}
}
};
</script>
```
在这个示例中,我们定义了一个 `dates` 数组来存储不可选中的日期,然后使用 `disabledDate` 方法来判断当前日期是否应该被禁用。在 `disabledDate` 方法中,我们将当前日期格式化为 `yyyy-mm-dd` 的字符串,并通过 `indexOf` 方法来判断它是否在 `dates` 数组中。如果在 `dates` 数组中,返回 `true` 表示该日期不可选中,否则返回 `false` 表示该日期可选中。
注意:这里使用了 `formatDate` 方法来将日期对象格式化为字符串,因为 `dates` 数组中的日期也是字符串类型的。如果你在 `dates` 数组中存储的是日期对象,可以省略 `formatDate` 方法,直接通过 `indexOf` 方法来判断日期是否相等即可。
阅读全文