element plus 日期范围 自定义内容

问题:
按照官网上的自定义内容示例,修改日期选择器没有问题,如果修改日期范围选择器,修改后会丢失日期范围选择时的样式。

解决:
从F12中不难看出日期范围的选择样式来自于.el-date-table-cell
element plus 日期范围 自定义内容_第1张图片
而示例中写的是.cell,所以只需改一下class,再在示例代码的基础上稍作修改就可以了

element plus 日期范围 自定义内容_第2张图片

附:示例代码

<template>
  <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-value="[new Date(2021, 10, 1), new Date(2021, 11, 1)]"
  >
    <template #default="cell">
      <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
        <span class="el-date-table-cell__text">{{ cell.text }}span>
        <span v-if="isHoliday(cell)" class="holiday"/>
      div>
    template>

  el-date-picker>
template>

<script lang="ts" setup>
import {ref} from 'vue'

const value = ref('')

const holidays = [
  '2021-10-01',
  '2021-10-02',
  '2021-10-03',
  '2021-10-04',
  '2021-10-05',
  '2021-10-06',
  '2021-10-07',
]

const isHoliday = ({dayjs}) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}


script>
<style scoped>
.holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
style>

你可能感兴趣的:(解决方案,前端,vue.js,javascript,前端,elementplus)