elementPlus时间选择器el-date-picker限制只能选择当前天至30天前的日期

在Element Plus中，要实现时间选择器el-date-picker组件只能选择当前天及之前30天内的日期，可以通过设置disabledDate属性来实现。以下是一个简单的代码示例：

<template>
  <el-date-picker
    v-model="value"
    type="date"
    :disabled-date="disabledDate"
    placeholder="选择日期">
  </el-date-picker>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const value = ref('');
 
    const disabledDate = (time) => {
      // 获取30天前的日期
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setTime(thirtyDaysAgo.getTime() - 30 * 24 * 60 * 60 * 1000);
 
      // 禁用今天之后的日期，并且还禁用了30天之后的日期
      return time.getTime() > Date.now() || time.getTime() < thirtyDaysAgo.getTime();
    };
 
    return {
      value,
      disabledDate,
    };
  },
};
</script>

在这个示例中，disabledDate函数定义了不可选择的日期范围。它通过比较当前时间和选择的日期来判断是否禁用该日期。如果选择的日期在当前日期之后或在30天前的日期之前，disabledDate函数返回true，表示该日期不可选择。