element-ui 日期选择器选择日期范围，怎么默认展示前一天

Element UI 的日期选择器组件（如 `el-date-picker`）通常提供了一些内置的功能和事件，包括导航日期的上下按钮。当你点击上一页按钮时，对应的事件可能是 `prev` 或者 `change` 事件，这会触发日期选择器向前移动到上一月或者前一天。例如： ```javascript <template> <el-date-picker v-model="value" type="date" :clearable="clearable" @change="handleChange" // 当日期改变时触发 @prev="handlePrev" // 当点击上一页按钮时触发 ></el-date-picker> </template> <script> export default { data() { return { value: '', clearable: true, }; }, methods: { handleChange(date) { console.log('日期已更改', date); }, handlePrev() { console.log('上一页被点击'); this.value = new Date(this.value.getTime() - (24 * 60 * 60 * 1000)); // 减去一天的时间 }, }, }; </script> ``` 在这个例子中，`handlePrev` 方法会在用户点击上一页按钮时被调用，并更新选中的日期。

### 配置 Element-UI Datepicker 默认可选范围为1天或7天 Element-UI 的 `DatePicker` 组件可以通过 `picker-options` 参数来实现自定义日期选择范围的功能。为了满足需求，即让用户可以选择 **仅一天** 或者 **七天** 范围内的日期，可以按照以下方式配置。 #### 使用 picker-options 实现功能 通过设置 `disabledDate` 方法以及提供预设选项的方式，能够控制用户的选择行为并限定其只能选择特定的时间跨度。以下是完整的解决方案： ```javascript export default { data() { return { timeRange: [], // 存储选定的日期范围 pickerOptions: { // 自定义日期选择器的行为 shortcuts: [ { text: '今天', onClick(picker) { const end = new Date(); const start = new Date(end); picker.$emit('pick', [start, end]); } }, { text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); // 减去7天 picker.$emit('pick', [start, end]); } } ], disabledDate(time) { const today = new Date().setHours(0, 0, 0, 0); // 获取当天零点时间戳 const sevenDaysAgo = new Date(today - (3600 * 1000 * 24 * 7)); // 计算前7天的零点时间戳 return time.getTime() > today || time.getTime() < sevenDaysAgo; // 只允许选择今天的前7天到今天之间的日期 } } }; } }; ``` 上述代码实现了两个主要目标： 1. 提供快捷按钮分别用于快速选择「今天」和「最近一周」[^1]。 2. 利用 `disabledDate` 属性禁用了超出指定范围（当前日期往前推7天）之外的所有日期[^2]。 #### HTML 结构部分 配合 Vue.js 数据绑定语法，在模板中嵌入如下结构即可完成界面展示与交互逻辑关联： ```html <el-date-picker v-model="timeRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"> </el-date-picker> ``` 此段HTML片段中的属性解释如下： - `v-model`: 将组件双向绑定到变量 `timeRange` 上以便获取所选时间段； - `type`: 定义显示模式为区间(`daterange`)而非单个日期； - `align`, `unlink-panels`, etc.: 进一步优化用户体验的小特性调整； ### 注意事项 当应用以上方法时需要注意浏览器兼容性和实际业务场景下的特殊处理情况，比如节假日排除等功能扩展可能需要额外编写辅助函数来进行更复杂的过滤条件设定。