SoFunction
Updated on 2025-04-05

How to add dot marks to specified dates by el-date-picker

elementui date selector el-date-picker adds dot marking to the specified date

    <el-date-picker
          v-model="time"
          type="date"
          :clearable="false"
          :picker-options="pickerOptions"
          popper-class="picker-popper"
          placeholder="Select a start time">
        </el-date-picker>```

Make a judgment on the date when dots need to be added
arrayTime is the date when dots are needed

  cellClassName (date) {
  if ((('YYYY-MM-DD')(null, null, date))) {
    return 'badge'
  }
},```

Adding styles Adding scoped styles to the style tag will not take effect Use popper-class class name to avoid style conflicts

.picker-popper .el-date-table__row .badge::after {
  position: absolute;
  content: "";
  left: 17px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8080ff;
}```

This is the article about adding dot marks to the specified date by elementui date selector el-date-picker. This is the end of this article. For more related elementui date selector el-date-picker, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!