el-data-picker季度区间选择器

### 使用 `el-date-picker` 实现季度区间选择 为了实现季度区间的选择功能，可以自定义 `el-date-picker` 的选项并处理所选日期以适应季度范围的需求。下面是一个详细的解决方案： #### 自定义组件模板 通过修改原有的 `<el-date-picker>` 配置来支持季度选择。 ```html <template> <div class="block"> <!-- 季度选择器 --> <el-date-picker v-model="quarterRange" type="daterange" range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="customPickerOptions" format="yyyy 年 第 Q 季度" value-format="timestamp" @change="handleQuarterChange"> </el-date-picker> </div> </template> ``` #### 数据属性配置 在 Vue 组件的数据部分初始化必要的变量和方法。 ```javascript <script> export default { data() { return { quarterRange: [], // 用户选择的时间段 customPickerOptions: { onPick({ maxDate, minDate }) { if (maxDate && !minDate) { const year = new Date(maxDate).getFullYear(); this.quarterStartEnd(year); } }, shortcuts: [{ text: '本年第一季度', onClick(picker) { const nowYear = new Date().getFullYear(); picker.$emit('pick', [ new Date(nowYear, 0), // January of current year new Date(nowYear, 2, 31)// March last day of current year ]); } }] } }; }, methods: { handleQuarterChange(value){ console.log(`选择了 ${value}`); }, /** * 计算指定年的四个季度起始时间戳 */ quarterStartEnd(year){ let quarters = []; for(let i=0;i<=9;i+=3){ var startDate = `${year}-${i+1}-01`; var endDate = `${year}-${(i+3)>12?12:i+3}-${new Date(year,i+2,0).getDate()}`; quarters.push([startDate,endDate]); } // 更新快捷方式菜单中的可选项 this.customPickerOptions.shortcuts = quarters.map((item,index)=>{ return{ text:`${year}年第${index+1}季度`, onClick:(picker)=>{ picker.$emit('pick',[new Date(item[0]),new Date(item[1])]) } } }); this.$forceUpdate(); // 强制刷新视图以便显示最新的快捷项 } } }; </script> ``` 此代码片段展示了如何创建一个能够选择特定年度内的不同季度的日期选择器，并允许用户点击预设好的季度按钮快速选取相应时间段[^1]。