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%);
}

直接就可以用哦

相关推荐
小样还想跑6 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解16 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982437 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210039 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag40 分钟前
报错 400 和405解决方案
vue.js·spring boot
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
白杨木影子被拉长1 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a1 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js