element UI选择年,月,季度,双月

element ui 选择年,半年,季度,月

效果图

源码

<template>
	<div class="block">
		<div>
			<el-button @click="years">年</el-button>
			<el-button @click="halfyear">半年</el-button>
			<el-button @click="quarter">季度</el-button>
			<el-button @click="month">月</el-button>
			<!-- 半年 -->
			<div v-show="showTime6">
				<span @click="showsixMonth">
					<el-input prefix-icon="el-icon-date" v-model="halfYearMonth" placeholder="请选择" style="width: 13.75rem;"></el-input>
				</span>
				<li class="show6" v-show="showTimehalfYear">
					<p class="show6P"> <span>
							<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>
						<span role="button" class="span-year">{{year}}年</span>
						<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>
						</span>
					</p>
					<div class="selectMonth">
						<p v-for="(item,index) in fullMonth" @click="choseHalfYear(item)">{{item}}</p>
					</div>
				</li>

			</div>
		</div>
		<el-date-picker v-model="time" v-show="showNomaldata" :type=dataType placeholder="请选择">
		</el-date-picker>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				time: '',
				dataType: 'year',
				showNomaldata: true,
				year: new Date().getFullYear(),
				fullMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				status: '',
				//半年
				halfYearMonth: "",
				showTimehalfYear: false,
				showTime6: false
			}
		},
		
		methods: {
			prev() {
				this.year = this.year * 1 - 1
			},
			next() {
				this.year = this.year * 1 + 1
			},
			years() {
				this.dataType = 'year'
				this.showNomaldata = true
				this.showTime6 = false
			},
			//半年
			halfyear() {
				this.showNomaldata = false
				this.showTime6 = true
				this.showTimehalfYear = true
				this.halfYearMonth = ''
				this.status = 'halfyear'
			},
			showsixMonth() {
				this.showTimehalfYear = !this.showTimehalfYear
			},
			choseHalfYear(v) {
				console.log(this.status)
				if (this.status == "halfyear") {
					if (v <= 6) {
						this.halfYearMonth = this.year + "上半年"
					} else {
						this.halfYearMonth = this.year + "下半年"
					}
				}else if(this.status == "quarter"){
					if ( v>0 && v<4) {
						this.halfYearMonth = this.year + "第一季度"
					} else if ( v>3 && v<7){
						this.halfYearMonth = this.year + "第二季度"
					}else if ( v>6 && v<10){
						this.halfYearMonth = this.year + "第三季度"
					}else{
						this.halfYearMonth = this.year + "第四季度"
					}
				}
			},
			quarter() {
				this.showNomaldata = false
				this.showTime6 = true
				this.showTimehalfYear = true
				this.halfYearMonth = ''
				this.status = 'quarter'
			},
			month() {
				this.dataType = 'month'
				this.showNomaldata = true
				this.showTime6 = false
			},
		}
	}
</script>

<style>
	.show6 {
		width: 322px;
		margin-top: 5px;
		position: absolute;
		z-index: 2;
		height: 272px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		background: #fff;
		padding: 10px;
		box-sizing: border-box;
	}

	.show6P {
		width: 100%;
		height: 43px;
		line-height: 43px;
		border-bottom: 1px solid #f5f5f5;

	}


	.show6:nth-child(1) span {
		display: inline-block;
		height: 100%;
		line-height: 43px;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.selectMonth {
		width: 100%;
		height: 14.3125rem;
		display: flex;
		flex-flow: wrap;
	}

	.selectMonth p {
		width: 25%;
		height: 25%;
		text-align: center;
		line-height: 4rem;
	}

	.selectMonth p:hover {
		background: rgba(19, 131, 255, 0.052);
		cursor: pointer;
	}

	.span-year {
		width: 90%;
		margin: 0 auto;
		display: inline-block;
		float: left;
		text-align: center;
		line-height: 40px;

	}

	.el-input {
		width: 215px;
		height: 38px;
		display: inline-block;
	}
</style>

待优化