element ui 日期范围季度选择

Element UI提供了一个DatePicker组件，可以通过设置type属性为"daterange"来实现日期范围选择。而要实现季度选择功能，可以通过自定义快捷选项来实现。

以下是示例代码：

<template>
  <el-date-picker
    v-model="dateRange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    type="daterange"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [], // 存储选中日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: "本季度",
            onClick(picker) {
              let start = new Date(),
                end = new Date();
              let now = new Date();
              let quarter = Math.floor(now.getMonth() / 3); // 获取当前季度
              start.setMonth(quarter * 3); // 设置季度开始月份
              start.setDate(1); // 设置季度开始日期
              end.setMonth(quarter * 3 + 2); // 设置季度结束月份
              end.setDate(31); // 设置季度结束日期
              picker.$emit("pick", [start, end]); // 触发选中日期范围事件
            },
          },
          {
            text: "上季度",
            onClick(picker) {
              let start = new Date(),
                end = new Date();
              let now = new Date();
              let quarter = Math.floor(now.getMonth() / 3) - 1; // 获取上个季度
              start.setMonth(quarter * 3); // 设置季度开始月份
              start.setDate(1); // 设置季度开始日期
              end.setMonth(quarter * 3 + 2); // 设置季度结束月份
              end.setDate(31); // 设置季度结束日期
              picker.$emit("pick", [start, end]); // 触发选中日期范围事件
            },
          },
          {
            text: "去年本季度",
            onClick(picker) {
              let start = new Date(),
                end = new Date();
              let now = new Date();
              let quarter = Math.floor(now.getMonth() / 3); // 获取当前季度
              start.setFullYear(now.getFullYear() - 1); // 设置年份为去年
              start.setMonth(quarter * 3); // 设置季度开始月份
              start.setDate(1); // 设置季度开始日期
              end.setFullYear(now.getFullYear() - 1); // 设置年份为去年
              end.setMonth(quarter * 3 + 2); // 设置季度结束月份
              end.setDate(31); // 设置季度结束日期
              picker.$emit("pick", [start, end]); // 触发选中日期范围事件
            },
          },
        ],
      },
    };
  },
};
</script>

以上代码中，我们定义了一个DatePicker组件，同时设置了type属性为"daterange"，以实现日期范围选择功能。同时，我们定义了三个快捷选项，分别是"本季度"、"上季度"和"去年本季度"，通过onClick事件来实现选中相应日期范围的操作。最后，我们将pickerOptions传递给DatePicker组件的picker-options属性中，从而使得快捷选项可以在DatePicker组件中显示出来。