el-date-picker季度区间选择器和季度选择器，vue2

在 Vue 2 中，`el-date-picker`组件的季度区间选择器允许用户选择从一个季度到另一个季度的日期范围。这个组件来自Element UI库，它提供了一种直观的方式来控制日期选择。以下是基本的使用步骤：

1. 首先，要在项目中使用`el-date-picker`，需要安装Element UI并引入它的CSS样式：

   npm install element-ui

2. 在入口文件中引入并全局注册组件：

   import { ElDatePicker } from 'element-ui';
   Vue.component(ElDatePicker.name, ElDatePicker);

3. 在模板中添加季度区间选择器：

   <el-date-picker
     type="daterange"
     v-model="quarterRange"
     start-placeholder="开始季度"
     end-placeholder="结束季度"
     range-separator="至"
     :picker-options="{ quarters: true }"
   ></el-date-picker>

- `v-model`绑定双向数据，`quarterRange`存储用户选择的季度范围。
- `type="daterange"`指定选择器为区间选择。
- `:quarters="true"`启用季度模式。

4. 在`data()`钩子里初始化数据，如初始化季度范围为空：

   data() {
     return {
       quarterRange: ['', ''],
     };
   }

5. 为了获取季度，可以自定义事件处理器来处理用户的输入，例如将日期转换为季度：

   methods: {
     handleSelect(value) {
       const [startDate, endDate] = value;
       this.quarterRange = [startDate.format('YYYY-QQ'), endDate.format('YYYY-QQ')];
     },
   },