一、需求背景

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

二、技术选型

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

 三、代码

v-model="date"

type="date"

placeholder="选择日期"

:picker-options="pickerOptions"

popper-class="picker-popper"

>

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 的下拉框添加自定义类名

 三、效果

四、参考文章

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

参考阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：