el-date-picker选择季度

<template>

  <div>

    <mark v-show="showSeason" class="_mark" @click.stop="showSeason = false" />

    <el-input

      v-model="showValue"

      placeholder="请选择季度"

      size="small"

      style="width:100%;"

      :disabled="disabled"

      @focus="showSeason = true"

    >

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

    </el-input>

    <el-card v-show="showSeason" class="box-card">

      <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"

        />

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

        <button

          type="button"

          aria-label="后一年"

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

          @click="next"

        />

      </div>

      <div class="text item">

        <el-button

          type="text"

          size="medium"

          class="_left"

          :disabled="disabled0"

          @click="selectSeason(0)"

        >第一季度</el-button>

        <el-button

          type="text"

          size="medium"

          class="_right"

          :disabled="disabled1"

          @click="selectSeason(1)"

        >第二季度</el-button>

      </div>

      <div class="text item">

        <el-button

          type="text"

          size="medium"

          class="_left"

          :disabled="disabled2"

          @click="selectSeason(2)"

        >第三季度</el-button>

        <el-button

          type="text"

          size="medium"

          class="_right"

          :disabled="disabled3"

          @click="selectSeason(3)"

        >第四季度</el-button>

      </div>

    </el-card>

  </div>

</template>

<script>

export default {

    props: {

        valueArr: {

            default: () => {

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

            },

            type: Array

        },

        getValue: {

            default: () => { },

            type: Function

        },

        defaultValue: {

            type: String,

            default: ''

        },

        // eslint-disable-next-line vue/require-default-prop, vue/require-prop-type-constructor

        disabled: '',

        villageForm: {

            default: () => {

                return {}

            },

            type: Object

        }

    },

    data() {

        return {

            showSeason: false,

            season: '',

            year: new Date().getFullYear(),

            showValue: '',

            disabled0: false,

            disabled1: false,

            disabled2: false,

            disabled3: false,

        }

    },

    watch: {

        defaultValue: function (value) {

            const arr = value.split('-');

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

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

            const arrAll = this.valueArr;

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

        },

        villageForm: function (value) {

            if (value.pubBizInterval.substring(5, 7) === '04' && value.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = value.pubBizInterval.substring(0, 4) + '第一季度'

            } else if (value.pubBizInterval.substring(5, 7) === '07' && value.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = value.pubBizInterval.substring(0, 4) + '第二季度'

            } else if (value.pubBizInterval.substring(5, 7) === '10' && value.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = value.pubBizInterval.substring(0, 4) + '第三季度'

            } else if (value.pubBizInterval.substring(5, 7) === '01' && value.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = parseInt(value.pubBizInterval.substring(0, 4)) - parseInt(1) + '第四季度'

            }

        }

    },

    created() {

        if (this.defaultValue) {

            const value = this.defaultValue;

            const arr = value.split('-');

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

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

            const arrAll = this.valueArr;

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

        }

        if (this.villageForm) {

            if (this.villageForm.pubBizInterval && this.villageForm.pubBizInterval.substring(5, 7) === '04' && this.villageForm.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = this.villageForm.pubBizInterval.substring(0, 4) + '第一季度'

            } else if (this.villageForm.pubBizInterval && this.villageForm.pubBizInterval.substring(5, 7) === '07' && this.villageForm.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = this.villageForm.pubBizInterval.substring(0, 4) + '第二季度'

            } else if (this.villageForm.pubBizInterval && this.villageForm.pubBizInterval.substring(5, 7) === '10' && this.villageForm.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = this.villageForm.pubBizInterval.substring(0, 4) + '第三季度'

            } else if (this.villageForm.pubBizInterval && this.villageForm.pubBizInterval.substring(5, 7) === '01' && this.villageForm.pubBizInterval.substring(8, 10) === '15') {

                this.showValue = parseInt(this.villageForm.pubBizInterval.substring(0, 4)) - parseInt(1) + '第四季度'

            }

        }

    },

    mounted() {

        this.getYear()

    },

    methods: {

        one() {

            this.showSeason = false

        },

        prev() {

            this.year = this.year * 1 - 1;

            this.getYear()

        },

        next() {

            this.year = this.year * 1 + 1;

            this.getYear()

        },

        reast() {

            this.showValue = ''

        },

        getYear() {

            if (this.year > new Date().getFullYear()) {

                this.disabled0 = true

                this.disabled1 = true

                this.disabled2 = true

                this.disabled3 = true

            } else if (this.year === new Date().getFullYear()) {

                if (new Date().getMonth() > '03') {

                    this.disabled0 = false

                    this.disabled1 = true

                    this.disabled2 = true

                    this.disabled3 = true

                } else if (new Date().getMonth() > '06') {

                    this.disabled0 = false

                    this.disabled1 = false

                    this.disabled2 = true

                    this.disabled3 = true

                } else if (new Date().getMonth() > '09') {

                    this.disabled0 = false

                    this.disabled1 = false

                    this.disabled2 = false

                    this.disabled3 = true

                } else {

                    this.disabled0 = true

                    this.disabled1 = true

                    this.disabled2 = true

                    this.disabled3 = true

                }

            } else {

                this.disabled0 = false

                this.disabled1 = false

                this.disabled2 = false

                this.disabled3 = false

            }

        },

        selectSeason(i) {

            const that = this;

            that.season = i + 1;

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

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

            that.showSeason = false;

            if (this.season === 1) {

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

            } else if (this.season === 2) {

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

            } else if (this.season === 3) {

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

            } else if (this.season === 4) {

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

            }

            that.sendMsg()

        },

        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()

        },

        sendMsg() {

            const params = {

                showValue: this.showValue,

                year: this.year,

                quarter: this.season

            }

            this.$emit('func', params)

        }

    }

}

</script>

<style>

._mark {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(0, 0, 0, 0);

    z-index: 999;

    width: 200px;

}

.el-card.is-always-shadow,

.el-card.is-hover-shadow:focus,

.el-card.is-hover-shadow:hover {

    width: 200px;

}

.yearBtn {

    text-align: center;

    padding: 0;

}

.box-card {

    width: 322px;

    padding: 0 3px 20px;

    margin-top: 10px;

    position: fixed;

    z-index: 9999

}

.el-date-picker__header-label {

    padding: 0 25px;

}

.text.item {

    text-align: center;

}

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

    width: 40%;

    color: #606266

}

.text.item ._left {

    float: left;

}

.text.item ._right {

    float: right;

}

::v-deep .el-input--small .el-input__inner {

    height: 41px;

}</style>