我们先看最终实现的效果图

下面是代码：

<template>
  <div id="box">
    <el-date-picker popper-class="data-style" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" :inline="true">
      <template #default="{ date }">
        <div class="date-wrapper">
          <div :class="getCustomClass(date)">
            {{ date.getDate() }}
            <span v-if="highlightedDates.includes(formatDate(date))" class="red-dot">已租出</span>
          </div>
        </div>
      </template>
    </el-date-picker>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElDatePicker } from 'element-plus'
// 堆代码 duidaima.com
// const selectedDate = ref('')
const highlightedDates = ['2023-09-16', '2023-10-23', '2023-10-24', '2023-10-27', '2023-10-26', '2023-10-29', '2023-11-01', '2023-12-24', '2023-11-02', '2023-11-03', '2023-11-05', '2023-11-23']

const pickerOptions = {
  disabledDate: (time) => {
    const date = new Date(time)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    return highlightedDates.indexOf(`${year}-${month}-${day}`) === -1
  },
}

function formatDate(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

function getCustomClass(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const formattedDate = `${year}-${month}-${day}`

  if (highlightedDates.includes(formattedDate)) {
    return 'red-date'
  }

  return ''
}
</script>
<!-- 因为日历组件还没有显示出来，所以我们无法通过深度监听来拿到日历弹层就需要另外写一个style样式表，没有样式隔离 -->
<style lang="scss">
.data-style {
  // border: 1px solid red !important;
  // display: block !important;
  // 动态修改日历弹层的样式(不需要样式渗透)(如果不生效，记得添加 !important)
}
</style>

<style lang="scss" scoped>

.date-wrapper {
  position: relative;
}

.red-date {
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: red;
  color: white;
  position: relative;
}

.red-dot {
  position: absolute;
  bottom: -18px;
  left: -4px;
  width: 100%;
  font-size: 10px;
  color: red;
  text-align: center;
  white-space: nowrap;
}
</style>

注意：

因为日历组件还没有显示出来，所以我们无法通过深度监听来拿到日历弹层就需要另外写一个style样式表，没有样式隔离。

对上面的代码进行解释:
当用户浏览某个日期选择器时，该代码会为其提供一些特殊功能。下面是代码的详细解释：
首先，我们定义了一个数组变量 highlightedDates，其中包含一些已被选中的日期，这些日期将在日期选择器中以特殊方式标记。用户可以根据这些标记来选择可用日期。

接下来，我们创建了一个对象变量 pickerOptions，其中包含了一个 disabledDate 函数。这个函数用于禁用未被选中的日期，以确保用户不能选择已被租出的日期。pickerOptions 对象将作为选项传递给日期选择器组件。

在 disabledDate 函数中，我们先获取了即将被渲染的日期 date。然后，我们使用 highlightedDates 数组来检查该日期是否存在于已被选中的日期中。如果存在，则返回 true，表示该日期被禁用，用户不能选择它。

最后，我们定义了一个 getCustomClass 函数。这个函数在渲染日期时被调用，用于决定日期的样式类。在本例中，我们根据日期是否在 highlightedDates 数组中来切换样式类。如果日期在数组中，我们将其样式类设置为 red-date，这样它将以特殊的红色样式显示。

为了增强代码的可读性和可维护性，我们还可以添加一些样式表。其中包含了一些定义 red-date 样式的规则，以及一些用于修改日期选择器样式的规则。这些样式表将确保日期选择器和标记样式的正确显示。

综上所述，这段代码利用 Element Plus 库的日期选择器组件，实现了以下功能：
1.标记已经被选中的日期
2.禁用已经被选中的日期，确保用户不能选择它们
3.改变已选中日期的样式，以突出显示这些日期