1.基于elementui开发的半年选择组件
2.调用
<el-halfyear-picker v-model="date" :size="size"></el-halfyear-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>
</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(halfyear_num = 1){
//创建一个时间
var time = new Date()
//设定年份
time.setFullYear(this.showYear)
//设定月份
if(halfyear_num == 1){
//上半年设为1月
time.setMonth(0)
}else{
//下半年设为7月
time.setMonth(6)
}
//设定日期和时分秒
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,halfyear_num){
// 如果没有选中时间 直接return false
if(!this.selectTime){
return false
}
//当前年份
var select_year = this.selectTime.getFullYear()
//判断当前季度
var select_halfyear_num = ""
var select_month = this.selectTime.getMonth() + 1
if(select_month >= 1 && select_month <= 6){
select_halfyear_num = 1
}else{
select_halfyear_num = 2
}
//如果年份 季度一致 则直接返回true
if(select_year == showYear && select_halfyear_num == halfyear_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 halfyear_text = ""
var month = this.selectTime.getMonth()+1
if(month >= 1 && month <= 6){
halfyear_text = "上半年"
}else{
halfyear_text = "下半年"
}
return `${this.selectTime.getFullYear()}年 ${halfyear_text}`
}
}
}
</script>
<style scoped>
</style>
