Element-UI日期选择器el-date-picker给指定日期添加红点标注

一、需求背景

---

        今天在项目开发中有一个需求，要求日期选择器中，指定的日期显示标注，标识该日期有待处理的内容。

二、技术选型

---

        查阅资料后我们得知，ElementUI在2.12.0版本里，日期选择器的picker-options新增了cellClassName方法，那么我们就来看一下如何实现。

 三、代码

---

<el-date-picker
      v-model="date"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions"
      popper-class="picker-popper"
    >
</el-date-picker>

data() {
    const that = this
    return {
      date: '',
      badgeDate: ['2023-01-01', '2023-01-11', '2023-01-15'],
      pickerOptions: {
        cellClassName: (time) => {
          if (that.badgeDate.includes(parseTime(time, '{y}-{m}-{d}'))) {
            return 'badge'
          }
        }
      }
   }
}

1、badgeDate为存在待处理的内容的日期，可以从后台获取

2、parseTime为处理时间格式的方法

parseTime(time, cFormat) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string')) {
      if ((/^[0-9]+$/.test(time))) {
        time = parseInt(time)
      } else {
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

 3、在style标签中加入scoped样式会不生效（原因是因为DateTimePicker 下拉框默认是直接挂载到body标签上），防止样式污染，可使用popper-class给DatePicker 的下拉框添加自定义类名

<style>
.picker-popper .el-date-table .badge::after {
  position: absolute;
  content: "";
  right: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
}
</style>

 三、效果

---

四、参考文章

---

教你一招：element日期选择器el-date-picker修改指定日期样式_Java觉浅的博客-CSDN博客_el-date-picker picker-options​​​​​​