在vue2中使用el-date-picker组件中的:disabled-date属性,将除了数组dates: ["2023-05-23", "2023-05-22", "2023-05-19"],以外的日期都置为不可选中状态,并将不可选中的日期背景色都改为background-color: #29343f;,请给出代码示例
时间: 2024-02-09 20:12:56 浏览: 33
好的,以下是一个示例代码:
```html
<template>
<div>
<el-date-picker
v-model="date"
type="date"
:disabled-date="disabledDate"
:picker-options="{ disabledDate: disabledDate }"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
date: "",
dates: ["2023-05-23", "2023-05-22", "2023-05-19"]
};
},
methods: {
disabledDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const dateString = `${year}-${month < 10 ? "0" + month : month}-${day < 10 ? "0" + day : day}`;
return !this.dates.includes(dateString);
}
}
};
</script>
<style>
.el-date-picker__editor-wrap.is-disabled .el-date-picker__editor {
background-color: #29343f;
}
</style>
```
在上面的示例代码中,我们定义了一个 `disabledDate` 方法,用于判断某个日期是否可选。在这个方法中,我们首先将日期转换为字符串格式,然后判断该字符串是否在 `dates` 数组中。如果在,则该日期可选;如果不在,则该日期不可选。
同时,我们也在 `style` 标签中定义了一个样式,用于将不可选日期的背景色设置为 `#29343f`。