el-date-picker限制时间

el-date-picker是一个基于Element UI的日期选择器组件，可以通过设置disabled-date属性来限制时间。具体实现方法如下：

1.引入day.js库和el-date-picker组件。

2.使用ref创建一个dateRange变量，用于存储选择的日期范围。

3.定义一个disableRange函数，用于判断日期是否被禁用。该函数的参数为一个Date对象，返回值为一个布尔值，true代表参数的日期会被禁用，false代表不会被禁用。在该函数中，我们可以使用day.js库来处理日期，实现对日期的限制。

4.在el-date-picker组件中设置v-model为dateRange，type为daterange，disabled-date为disableRange函数。

下面是示例代码：

<template>
  <div class="date-picker">
    <el-date-picker v-model="dateRange" type="daterange" :disabled-date="disableRange" />
  </div>
</template>

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

//时间处理
const dateRange = ref([])

const disableRange = (date: Date) => {
  //禁用2021年8月1日之前的日期
  return dayjs(date).isBefore('2021-08-01')
}
</script>

<style scoped>
.date-picker {
  width: 100vw;
  height: 90vh;
  display: grid;
  place-content: center;
}
</style>