苦惱於element沒有季度選擇器，網上搜羅後整理實現，以便後期開發使用

同文件夾下新建一個vue介面，命名為Quarter.vue

<template>

  <el-form>

    <el-form-item>

      <mark

        class="_mark"

        v-show="showSeason"

        @click.stop="showSeason=false"

      ></mark>

      <el-input placeholder="請選擇季度" v-model="showValue" style="width:12.7rem;" @focus="showSeason=true">
 

        <i slot="prefix" class="el-input__icon el-icon-date"></i>

      </el-input>

      <el-card

        class="box-card"

        v-show="showSeason"

      >

        <div slot="header" class="clearfix yearBtn">

          <button

            type="button"

            aria-label="前一年"
 

            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"

            @click="prev"

          ></button>

          <span role="button" class="el-date-picker__header-label">{{year}}年</span>

          <button

            type="button"

            aria-label="後一年"
 

            @click="next"

            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"

          ></button>

        </div>

        <div class="text item">

          <el-button

            type="text"

            size="medium"

            class="_left"

            @click="selectSeason(0)"

          >第一季度</el-button>

          <el-button

            type="text"

            size="medium"

            class="_right"

            @click="selectSeason(1)"

          >第二季度</el-button>

        </div>

        <div class="text item">

          <el-button

            type="text"

            size="medium"

            class="_left"

            @click="selectSeason(2)"

          >第三季度</el-button>

          <el-button

            type="text"

            size="medium"

            class="_right"

            @click="selectSeason(3)"

          >第四季度</el-button>

        </div>

      </el-card>

    </el-form-item>

  </el-form>

</template>

<script>

export default {

  props: {

    valueArr: {

      default: () => {

        return ['01-03', '04-06', '07-09', '10-12']

      },

      type: Array

    },

    getValue: {

      default: () => {},

      type: Function

    },

    defaultValue: {

      default: '',

      type: String

    }

  },

  data() {

    return {

      showSeason: false,

      season: '',

      year: new Date().getFullYear(),

      showValue: ''

    }

  },

  created() {

    if (this.defaultValue) {

      let value = this.defaultValue

      let arr = value.split('-')

      this.year = arr[0].slice(0, 4)

      let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)

      let arrAll = this.valueArr

      this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`

    }

  },

  watch: {

    defaultValue: function(value, oldValue) {

      let arr = value.split('-')

      this.year = arr[0].slice(0, 4)

      let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)

      let arrAll = this.valueArr

      this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`

    }

  },

  methods: {

    one() {

      this.showSeason = false

    },

    prev() {

      this.year = this.year * 1 - 1

    },

    next() {

      this.year = this.year * 1 + 1

    },

    selectSeason(i) {

      let that = this

      that.season = i + 1

      let arr = that.valueArr[i].split('-')

      that.getValue(that.year + arr[0] + '-' + that.year + arr[1])

      that.showSeason = false

      this.showValue = `${this.year}年${this.season}季度`

      console.log(this.showValue)

    },

    getLastDay(year,month) {

      var new_year = year //取當前的年份

      var new_month = month++ //取下一個月的第一天，方便計算（最後一天不固定）

      if(month>12) {

        new_month -= 12//月份減

        new_year++ //年份增

      }

      var new_date = new Date(new_year,new_month,1) //取當年當月中的第一天

      return (new Date(new_date.getTime()-1000*60*60*24)).getDate() //獲取當月最後一天日期

    }

  }

}

</script>

<style scoped>

._mark {

  position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;

}

.yearBtn {

  text-align:center;padding:0

}

.box-card {

  width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999

}

.text.item {

  text-align: center;

}

.text.item >>> .el-button{

  width:40%;color: #606266;

}

.text.item ._left {

  float: left;

}

.text.item ._right {

  float: right;

}

</style>
 

在需要使用的vue介面匯入

<script>

//自定義季度選擇器

import Quarter from "./Quarter";

export default {

  data() {

    return {

      value: "",

      value1: "",

      options: [

        { label: "季度統計", value: "first" },

        { label: "月度統計", value: "second" },

        { label: "周度統計", value: "third" }

      ]

    };

  },

  components: {

    Quarter

  }

};

</script>

使用：

<Quarter></Quarter>