element ui 日期范围实现季度选择

可以使用 Element UI 的日期选择器（DatePicker）结合自定义快捷选项（shortcuts）来实现季度选择。

首先，在 DatePicker 中设置 type 属性为 'daterange'，这样可以选择一个日期范围。然后，在 DatePicker 中添加 shortcuts 属性，该属性是一个数组，每个元素都是一个对象，包含了快捷选项的名称和对应的日期范围。我们可以设置四个季度的快捷选项，每个季度的日期范围分别为：1月1日到3月31日、4月1日到6月30日、7月1日到9月30日、10月1日到12月31日。

以下是示例代码：

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

<script>
export default {
  data() {
    return {
      dateRange: [],
      shortcuts: [{
          text: '第一季度',
          onClick(picker) {
            const start = new Date(picker.date.getFullYear(), 0, 1);
            const end = new Date(picker.date.getFullYear(), 2, 31);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '第二季度',
          onClick(picker) {
            const start = new Date(picker.date.getFullYear(), 3, 1);
            const end = new Date(picker.date.getFullYear(), 5, 30);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '第三季度',
          onClick(picker) {
            const start = new Date(picker.date.getFullYear(), 6, 1);
            const end = new Date(picker.date.getFullYear(), 8, 30);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '第四季度',
          onClick(picker) {
            const start = new Date(picker.date.getFullYear(), 9, 1);
            const end = new Date(picker.date.getFullYear(), 11, 31);
            picker.$emit('pick', [start, end]);
          }
        }
      ]
    }
  }
}
</script>

在这个示例中，我们使用了 range-separator 属性来设置日期范围的分隔符，start-placeholder 和 end-placeholder 属性来设置日期选择器中输入框的提示信息。

通过这种方式，用户就可以方便地选择一个季度的日期范围了。