经常使用element ui要通过扩展基础的日期选择，可以选择周、月、年或多个日期，但是官方没有提供季度选择，所以自己写个简易版本的季度选择便于使用。
子组件完整代码
<template>
<!--季度时间类型组件-->
<div class="quarter-picker" v-clickoutside="closeBox">
<i style="font-size:16px;color:#c0c4cc" class="el-icon-date"></i>
<el-input
@blur="handleBlur"
@focus="handleFocus"
@clear="handleClear"
v-model.trim="quarterTime"
size="mini"
clearable
placeholder="请选择季度"
></el-input>
<!-- 选项 -->
<div v-if="isOpen" class="mark_box el-picker-panel el-date-picker el-popper">
<div class="el-date-picker__header el-date-picker__header--bordered">
<button @click="prev" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
<span class="el-date-picker__header-label">{{year}}年</span>
<button @click="next" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
</div>
<div class="mark_content" @click="handleSelect">
<div class="text_box" :class="{active:active == 1}" data-id="1">第一季度</div>
<div class="text_box" :class="{active:active == 2}" data-id="2">第二季度</div>
<div class="text_box" :class="{active:active == 3}" data-id="3">第三季度</div>
<div class="text_box" :class="{active:active == 4}" data-id="4">第四季度</div>
</div>
</div>
</div>
</template>
<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
import moment from 'moment'
export default {
props: {
value: {
type: Array,
default: ''
}
},
directives: {
Clickoutside
},
data() {
return {
year: moment().format('YYYY'),
quarterTime: null,
isOpen: false,
active: null
}
},
created() {
if (this.value && this.value[0]) {
const month = moment(this.value[0]).format('MM')
if (parseInt(month) < 4) {
this.active = 1
this.quarterTime = '第一季度'
} else if (parseInt(month) < 7 && parseInt(month) > 3) {
this.active = 2
this.quarterTime = '第二季度'
} else if (parseInt(month) < 10 && parseInt(month) > 6) {
this.active = 3
this.quarterTime = '第三季度'
} else {
this.active = 4
this.quarterTime = '第四季度'
}
}
},
methods: {
prev() {
this.year = this.year * 1 - 1
},
next() {
this.year = this.year * 1 + 1
},
handleFocus() {
this.isOpen = true
},
handleBlur() {
if (this.value && this.value[0]) {
const month = moment(this.value[0]).format('MM')
if (parseInt(month) < 4) {
this.active = 1
this.quarterTime = '第一季度'
} else if (parseInt(month) < 7 && parseInt(month) > 3) {
this.active = 2
this.quarterTime = '第二季度'
} else if (parseInt(month) < 10 && parseInt(month) > 6) {
this.active = 3
this.quarterTime = '第三季度'
} else {
this.active = 4
this.quarterTime = '第四季度'
}
} else {
this.active = null
this.quarterTime = null
}
},
closeBox() {
this.isOpen = false
},
// 选择季度
handleSelect(event) {
// 获取被点击的子元素
const clickedElement = event.target
// 判断点击的是否为子元素
if (clickedElement.classList.contains('text_box')) {
// 获取子元素的数据
const dataId = clickedElement.dataset.id
this.active = dataId
let start = null
let end = null
if (dataId == 1) {
start = moment(`${this.year}-01`).startOf('month').format('YYYY-MM-DD')
end = moment(`${this.year}-03`).endOf('month').format('YYYY-MM-DD')
this.quarterTime = '第一季度'
} else if (dataId == 2) {
start = moment(`${this.year}-04`).startOf('month').format('YYYY-MM-DD')
end = moment(`${this.year}-06`).endOf('month').format('YYYY-MM-DD')
this.quarterTime = '第二季度'
} else if (dataId == 3) {
start = moment(`${this.year}-07`).startOf('month').format('YYYY-MM-DD')
end = moment(`${this.year}-09`).endOf('month').format('YYYY-MM-DD')
this.quarterTime = '第三季度'
} else {
start = moment(`${this.year}-10`).startOf('month').format('YYYY-MM-DD')
end = moment(`${this.year}-12`).endOf('month').format('YYYY-MM-DD')
this.quarterTime = '第四季度'
}
this.$emit('input', [start, end])
this.$emit('change', [start, end])
this.isOpen = false
}
},
// 清空选择日期
handleClear() {
this.$emit('input', null)
this.active = null
}
}
}
</script>
<style lang="scss" scoped>
.quarter-picker {
min-width: 160px;
height: 32px;
border: 1px solid #e7e9f1;
background-color: #ffffff;
display: flex;
align-items: center;
padding: 0 5px;
position: relative;
}
.mark_box {
position: absolute;
top: 32px;
width: 130%;
height: 160px;
z-index: 999;
}
.mark_content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
.text_box {
padding: 5px;
width: 48%;
text-align: center;
cursor: pointer;
color: #606266;
}
.active {
font-weight: 600;
color: #409eff;
}
}
/deep/ .el-input--mini .el-input__inner {
border: none !important;
padding: 0;
padding-left: 5px;
}
</style>
