vue3 element plus el-date-picker组件在日期上做标识

1.先看效果图,带红点的就是我要做标识的日期

2.直接把代码拿出来就可以用

(1)html部分

javascript 复制代码
<el-date-picker
      v-model="startTime"
      type="datetime"
      placeholder="选择开始日期"
      format="YYYY-MM-DD HH:mm"
      value-format="YYYY-MM-DD HH:mm:ss"
      @panel-change="changeTime"
      teleported
      ><template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text }}</span>
          <span v-if="isHoliday(cell)" class="holiday" />
        </div>
      </template>
    </el-date-picker>

(2)js部分(holidays就是你想渲染的日期标识)

javascript 复制代码
// 日历上加标识
// 日期
const day = ref('')
//holidays 数组里面的格式要和下面的dayjs.format格式一致
const holidays = ref(['2022-11-2', '2022-11-3', '2022-11-4'])
const isHoliday = ({ dayjs }) => {
  return holidays.value.includes(dayjs.format('YYYY-M-D'))
}
// 切换日期组件导航按钮
//data为当前日期面板的时间,后面转成了时间戳
const changeTime = (date, mode, view) => {
  const d = new Date(date)
  const params = {
    year: d.getFullYear(),
    month: d.getMonth() + 1
  }
  // calendar(params).then((res) => {
  //   if (res.data.length > 0) {
  //     holidays.value = [];
  //     res.data.forEach((item) => {
  //       holidays.value.push(
  //         d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + item.day
  //       );
  //     });
  //   }
  // });
}

(3.)css部分

javascript 复制代码
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #626aef;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

直接就可以用哦

相关推荐
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情5 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图