1.基于elementui开发的季度选择组件
![](https://img2022.cnblogs.com/blog/1813302/202210/1813302-20221017163317270-688734148.png)
2.调用
<el-quarter-picker v-model="start_time" :size="size"></el-quarter-picker>
3.代码
<template>
<div class="el-quarter-picker-wrap">
<el-popover placement="bottom-start" title="" trigger="manual" content="" width="235"
v-model="showCard">
<el-input slot="reference" v-model="showText" placeholder="请选择季度" :size="size" clearable prefix-icon="el-icon-date" readonly
@click.stop.native="showCard = true"
></el-input>
<div>
<!-- 年份切换 -->
<div style="display: flex;align-items: center;justify-content: space-between;">
<div>
<el-button icon="el-icon-arrow-left" type="text" style="color:#303133;" @click="onChange('prev')"></el-button>
</div>
<div style="font-size: 16px;">{{showYear}}</div>
<div>
<el-button icon="el-icon-arrow-right" type="text" style="color:#303133;" @click="onChange('next')"></el-button>
</div>
</div>
<!-- 季度列表 -->
<div style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
<div style="width:50%;text-align: center;margin-bottom: 5px;">
<el-link :type="isActive(showYear,1)? 'primary':''" :underline="false" @click="selectEvent(1)">第一季度</el-link>
</div>
<div style="width:50%;text-align: center;margin-bottom: 5px;">
<el-link :type="isActive(showYear,2)? 'primary':''" :underline="false" @click="selectEvent(2)">第二季度</el-link>
</div>
<div style="width:50%;text-align: center;margin-bottom: 5px;">
<el-link :type="isActive(showYear,3)? 'primary':''" :underline="false" @click="selectEvent(3)">第三季度</el-link>
</div>
<div style="width:50%;text-align: center;margin-bottom: 5px;">
<el-link :type="isActive(showYear,4)? 'primary':''" :underline="false" @click="selectEvent(4)">第四季度</el-link>
</div>
</div>
</div>
</el-popover>
</div>
</template>
<script>
//季度选择器:
module.exports = {
data() {
return {
showCard: false,
showTime: new Date(), //展示的时间 完整
showYear: "", //当前时间 年
selectTime: "",//选中的当前时间
}
},
props: {
size: {
type: String,
default: "small"
},
value:{
type: [String,Number],
default: "" ,//2022-08-23
}
},
model:{
prop:"value",//定义v-model的值传递给那个prop属性
event:"change",//定义此事件触发时,自动更新父组件v-model对应的数据
},
watch:{
value:{
immediate:true,
handler:function(val){
if(!val){
this.selectTime = "" //当前时间
}else{
//解析传入的时间
this.selectTime = new Date(val)
//定位到当前年份
this.showTime = new Date(val)
this.showYear = this.showTime.getFullYear()
}
}
}
},
created(){
this.showYear = this.showTime.getFullYear()
},
mounted(){
//监听全局按钮的点击
var that = this
document.body.addEventListener('click',function(){
//console.log('点击了body')
that.showCard = false
})
},
methods:{
//点击前后切换年份
onChange(type = ''){
if(type == 'next'){
//时间往前后一年
this.showTime.setFullYear(this.showTime.getFullYear()+1)
}else if(type == 'prev'){
//时间往前推一年
this.showTime.setFullYear(this.showTime.getFullYear()-1)
}
//更新展示的时间
this.showYear = this.showTime.getFullYear()
},
//选中季度事件
selectEvent(quarter_num = 1){
//创建一个时间
var time = new Date()
//设定年份
time.setFullYear(this.showYear)
//设定月份 根据季度进行设置
if(quarter_num == 1){
//第一季度设为1月
time.setMonth(0)
}else if(quarter_num == 2){
//第二季度设为4月
time.setMonth(3)
}else if(quarter_num == 3){
//第三季度设为7月
time.setMonth(6)
}else{
//第四季度设为10月
time.setMonth(9)
}
//设定日期和时分秒
time.setDate(1)
time.setHours(0)
time.setMinutes(0)
time.setSeconds(0)
//隐藏
this.showCard = false
//更新当前时间
this.selectTime = time
var date_text = this.transformDateMethod(this.selectTime,format='YY-MM-DD')
//通知父组件 返回时间戳
this.$emit('change',date_text)
},
//判断选中的时间和展示的时间是否匹配
isActive(showYear,quarter_num){
// 如果没有选中时间 直接return false
if(!this.selectTime){
return false
}
//当前年份
var select_year = this.selectTime.getFullYear()
//判断当前季度
var select_quarter_num = ""
var select_month = this.selectTime.getMonth() + 1
if(select_month >= 1 && select_month <= 3){
select_quarter_num = 1
}else if(select_month >= 4 && select_month <= 6){
select_quarter_num = 2
}else if(select_month >= 7 && select_month <= 9){
select_quarter_num = 3
}else{
select_quarter_num = 4
}
//如果年份 季度一致 则直接返回true
if(select_year == showYear && select_quarter_num == quarter_num){
return true
}else{
return false
}
},
transformDateMethod(dateobj,format=''){
var year = dateobj.getFullYear()
var month = dateobj.getMonth()+1
var date = dateobj.getDate()
var hours = dateobj.getHours()
var minutes = dateobj.getMinutes()
var seconds = dateobj.getSeconds()
var day = dateobj.getDay()
var day_str = ''
switch(day){
case 0: day_str = '星期日';break;
case 1: day_str = '星期一';break;
case 2: day_str = '星期二';break;
case 3: day_str = '星期三';break;
case 4: day_str = '星期四';break;
case 5: day_str = '星期五';break;
case 6: day_str = '星期六';break;
default: break;
}
if(month < 10){
month = '0'+ month
}
if(date < 10){
date = '0'+ date
}
if(hours < 10){
hours = '0'+ hours
}
if(minutes < 10){
minutes = '0'+ minutes
}
if(seconds < 10){
seconds = '0'+ seconds
}
if(format == ''){
return `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} ${day_str}`
}else{
//替换年月日时分秒
format = format.replace('YY',year)
format = format.replace('MM',month)
format = format.replace('DD',date)
format = format.replace('hh',hours)
format = format.replace('mm',minutes)
format = format.replace('ss',seconds)
format = format.replace('Day',day_str)
return format
}
}
},
computed:{
//展示选中的时间
showText(){
if(!this.selectTime){
return ""
}
var quarter_text = ""
var month = this.selectTime.getMonth()+1
if(month >= 1 && month <= 3){
quarter_text = "第一季度"
}else if(month >= 4 && month <= 6){
quarter_text = "第二季度"
}else if(month >= 7 && month <= 9){
quarter_text = "第三季度"
}else{
quarter_text = "第四季度"
}
return `${this.selectTime.getFullYear()}年 ${quarter_text}`
}
}
}
</script>
<style scoped>
</style>