html时间选择器样式,解决Element UI 日期选择器自定义修改多个样式

需求

背景：通过echart图表加以日期选择器，对用户数据进行动态切换展示，并在日期选择器中标识那天有数据和用户是否查看。

技术选型

采用element ui 2.14.1版本，主要通过picker Options 新增 cellClassName 进行实现。

代码

HTML

element ui 日期选择器

CSS.circle::after {

position: absolute;

content: '';

right: 2px;

top: 4px;

width: 5px;

height: 5px;

border-radius: 50%;

background-color: red;

}

.background span {

background-color: #C6CDEB;

border-radius: 50%;

color: #000;

}

标识当前那些是有数据和用户是否查看数据的样式

JSpickerOptions: {

cellClassName: (time) => {

for (let i = 0; i < this.arr.length; i++) {

if (this.arr[i].time.includes(this.getLocalTime(time.getTime()))) {

return `red ${this.flag == this.arr[i].fy ? 'green':""}`

}

}

}

},

arr 为后台传过来的数组 ，通过time时间判断是否包含与否，来显示当天是否有数据，通过 flag 字段和后台数据进行匹配，判断用户是否查看当天数据，提示标签的是否隐藏。

后台数据结构arr: [{

fy: true,

time: "2021-01-02"

}, {

fy: false,

time: "2021-01-03"

}, {

fy: true,

time: "2021-01-07"

}]

fy： 判断用户点击查看数据 time: 数据具体日期

demo 截图

紫色背景代表有数据的日期，带红色圆点代表有数据但是用户还未查看。

学习记录！！！加油！！！