element-ui 修改日期選擇器指定日期樣式

html

<el-date-picker
v-model="value"
type="date"
value-format="yyyy-MM-dd"
placeholder="選擇日期"
:picker-options="pickerOptions">
</el-date-picker>

 

css 注意 element掛載在body中

 

body .el-date-table td.selected.color span {

background-color: red;

}

js部分

 

 

data() {
return {
pickerOptions: this.date(),
value: '',
stopTime: [
"2020-08-01",
"2020-08-15",
"2020-08-29"
]
}
},
methods: {
date() {
let self = this;
return {
cellClassName(time) {
let day = time.getDate();
if (day < 10) {
day = "0" + day;
};
let month = time.getMonth() + 1
if (month < 10) {
month = "0" + month;
};
let year = time.getFullYear();
let res = year + "-" + month + "-" + day;
for (let i = 0; i < self.stopTime.length; i++) {
let _time = self.stopTime[i];
if (res == _time) {
return 'color';
}
}
}
}
},
}

 

 

來源 https://blog.csdn.net/weixin_44368997/article/details/108620936?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-2.control