el-date-picker picker-options vue3

### 关于 `el-date-picker` 组件中的 `picker-options` 在 Vue 3 中，Element Plus 的 `el-date-picker` 提供了丰富的自定义选项来增强用户体验。通过设置 `pickerOptions` 属性可以实现更多功能控制。 #### 基本属性 - **disabledDate**: 函数类型，用于禁用某些日期的选择。 ```javascript const disabledDate = (time) => { return time.getTime() < Date.now() - 8.64e7; } ``` - **shortcuts**: 数组类型，允许快速选择预设的时间范围或特定时间点。 ```javascript const shortcuts = [ { text: 'Today', value: new Date(), }, { text: 'Yesterday', value: () => { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); return date; }, }, { text: 'A week ago', value: () => { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); return date; }, }, ]; ``` - **firstDayOfWeek**: 整数类型，默认为周日作为一周的第一天(值为 0)，可以通过此参数调整每周第一天显示为何种星期几[^1]。 #### 实际应用案例 下面是一个完整的例子展示如何配置这些选项： ```html <template> <div class="block"> <span class="demonstration">Default</span> <el-date-picker v-model="value1" type="date" placeholder="Pick a day"></el-date-picker> <span class="demonstration">With picker options</span> <el-date-picker v-model="value2" type="daterange" range-separator="-" start-placeholder="Start date" end-placeholder="End date" :picker-options="pickerOptions" ></el-date-picker> </div> </template> <script setup lang="ts"> import { ref } from "vue"; const value1 = ref(''); const value2 = ref(''); // 定义 pickerOptions 对象 const pickerOptions = { disabledDate(time) { return time.getTime() > Date.now(); }, shortcuts, }; </script> ```