el-date-picker 选区间

### el-date-picker 选择日期区间的使用方法 `el-date-picker` 是 Element UI 提供的一个用于日期选择的功能组件，支持多种类型的日期选择操作。当需要实现日期区间的选择功能时，可以通过 `type="daterange"` 属性来启用该模式。 以下是基于提供的引用内容以及标准实践的完整示例： #### 基本用法 通过设置 `v-model` 和其他相关属性可以轻松绑定和控制日期区间的选择行为。 ```vue <template> <div> <!-- 使用 daterange 类型 --> <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width: 380px"> </el-date-picker> </div> </template> <script> export default { data() { return { dateRange: [], // 双向绑定选中的日期区间 pickerOptions: { // 自定义选项配置 shortcuts: [{ text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } }] } }; } }; </script> ``` 上述代码展示了如何创建一个带有快捷方式的日期区间选择器[^1]。其中，`shortcuts` 配置项允许用户快速选择预设的时间范围。 --- #### 设置默认时间范围 为了初始化时自动展示特定时间段，默认值可通过 `value` 或 `modelValue` 进行设定。例如，在某些场景下可能希望默认显示过去三天的数据。 ```javascript data() { return { dateRange: [ new Date(new Date().setDate(new Date().getDate() - 3)), // 默认起始时间为当前日期前3天 new Date() // 结束时间为今天 ] }; } ``` 此部分逻辑实现了默认选定一个固定长度的时间段作为初始状态[^3]。 --- #### 动态调整单元格样式 如果需要进一步增强用户体验，比如高亮标记特殊日子或者禁用不可选的日子，则需利用 `picker-options.cellClassName` 方法动态修改日历网格内的 CSS 样式。 ```javascript pickerOptions: { cellClassName(date) { if (isSpecialDay(date)) { // 定义 isSpecialDay 函数判断某一天是否为特殊情况 return 'special-day'; } else if (!isValidDay(date)) { // 判断某一天是否有效 return 'disabled-day'; } return ''; }, }, ``` 以上片段说明了如何依据业务需求定制化日期选择界面的表现形式[^2]。 --- ### 总结 综上所述，`el-date-picker` 的日期区间选择功能非常灵活，既能够满足基础的需求又具备高度扩展性。开发者可以根据实际项目情况自由组合各种参数完成复杂交互设计。