Resolve element UI date picker to modify styles for multiple specified dates (custom style Settings)

demand

Background: Through the ECHART chart to date selector, the user data is dynamically switched display, and in the date selector to mark the number of days of the month whether there is data and whether the user view the logo.

Technology selection

Use Element UI version 2.14.1, mainly through picker Options added cellClassName implementation.

code

HTML

<el-date-picker prefix-icon="el-icon-date" :picker-options="pickerOptions" v-model="timer" :clearable="false" "> 
</el-date-picker>
Copy the code

Element UI date picker

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;
        }
Copy the code

Identifies styles that currently have data and whether the user is viewing the data

JS

pickerOptions: {
                    cellClassName: (time) = > {
                        for (let i = 0; i < this.arr.length; i++) {
                            if (this.arr[i].time.includes(this.getLocalTime(time.getTime()))) {
                                return `red The ${this.flag == this.arr[i].fy ? 'green':""}`}}}},Copy the code

Arr is the background source data. It displays whether the data exists on the current day by checking whether the time parameter is contained. It matches the flag field with the background data to determine whether the user can view the current day data.

Background data structure

arr: [{
                    fy: true.time: "2021-01-02"
                }, {
                    fy: false.time: "2021-01-03"
                }, {
                    fy: true.time: "2021-01-07"
                }]
Copy the code

Fy: determines whether the user clicks to view data. Time: specifies the date when data is returned

The demo screenshot

A purple background represents dates with data, and a red dot represents dates with data but not yet viewed by the user.

Learning record!! Come on!!