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

更新效果图

 组件包地址el-data-picker季度区间选择器-Javascript文档类资源-CSDN下载使用方式不变，下载之后放在项目文件夹内直接引入即可

-----------------------分割线-----------------------

效果

1. element-ui版本号2.15.8，2.15.7el-data-picker会报错。该季度区间选择器会用到的插件只有dayjs，安装完dayjs之后直接引入以下组件使用即可

 config.js

// 季节对应筛选项
export const quarter_options = [
  {
    label: 'Q1',
    value: 1,
    months: [1, 2, 3]
  },
  {
    label: 'Q2',
    value: 2,
    months: [4, 5, 6]
  },
  {
    label: 'Q3',
    value: 3,
    months: [7, 8, 9]
  },
  {
    label: 'Q4',
    value: 4,
    months: [10, 11, 12]
  }
];

/**
 * 获取季度对应的月份
 * @returns
 */
export function getQuarterOptionMonths(value) {
  for (let item of quarter_options) {
    if (item.value == value) {
      return item.months;
    }
  }
}

/**
 * 获取日期对应季度
 * @returns
 */
export function getQuarterItemOfMonth(month) {
  for (let item of quarter_options) {
    if (item.months.includes(month)) {
      return item;
    }
  }
}

index.vue

quarter-picker.vue

2. 使用以上组件

import quarterPicker from '@/components/quarter-range-picker/index'


handleChange(value) {
  console.log(this.value)
  console.log(value)
},