与van-datetime-picker结合带年、月、日期时间的小组件

van-datetime-picker带年组件编写

这是子组件代码datepick.vue

<template>
	<div class="datepicks">
		<div class="flex-center-center date-margin">
			<div v-if="controls" @click="minusDate()">
				<van-icon color="#acacac" name="arrow-left" size="18px" />
			</div>
			<div class="date-show-bottom-box">
				<span v-show="dateTypeSelected == 0" @click="callPopupYear">{{
          showDateYear
        }}</span>
				<span v-show="dateTypeSelected !== 0" @click="callPopup">{{
          format(showDate)
        }}</span>
			</div>
			<div v-if="controls" @click="plusDate()">
				<van-icon color="#acacac" name="arrow" size="18px" />
			</div>
		</div>
		<!-- 弹出层 -->
		<van-popup v-model="showPopup" get-container="#app" position="bottom" safe-area-inset-bottom>
			<!--datetime  -->
			<div>
				<van-datetime-picker v-model="showDate" :formatter="formatter" :type="dateType" @cancel="cancel"
					@confirm="confirm" />
			</div>
		</van-popup>
		<!-- 弹出层 -->
		<van-popup v-model="showPopupYear" get-container="#app" position="bottom" safe-area-inset-bottom>
			<!-- picker 生成单独年选择 -->
			<div>
				<van-picker :columns="yearColumns" :default-index="yearIndex" show-toolbar @cancel="onCancelYear"
					@confirm="onConfirmYear" />
			</div>
		</van-popup>
	</div>
</template>
<script>
	function formatDate(date, n) {
		let time = new Date(date);
		let nowTime = "";
		let y = time.getFullYear();
		let m = time.getMonth() + 1;
		m = m < 10 ? '0' + m : m;
		let d = time.getDate();
		d = d < 10 ? '0' + d : d;
		let h = time.getHours();
		h = h < 10 ? '0' + h : h;
		let M = time.getMinutes();
		M = M < 10 ? '0' + M : M;
		let s = time.getSeconds();
		s = s < 10 ? '0' + s : s;
		if (n == "year") {
			nowTime = y
		} else if (n == "year-month") {
			nowTime = y + "-" + m
		} else if (n == "date") {
			nowTime = y + "-" + m + "-" + d
		} else if (n == "datetime") {
			nowTime = y + "-" + m + "-" + d + " " + h + ":" + M
		} else {
			nowTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s
		}
		return nowTime;
	}
	export default {
		name: "DateCompoment",
		props: {
			controls: {
				type: Boolean,
				default: false
			},
			type: String
		},
		data() {
			return {
				dateTypeSelected: 1,
				showPopup: false,
				dateType: "year",
				showDate: new Date(),
				showDateYear: null,
				yearColumns: [],
				showPopupYear: false,
				yearIndex: null
			};
		},
		watch:{
			type:function(nval){
				this.changeDateType(nval)
			},
		},
		methods: {
			// 切换日期类型
			changeDateType(code) {
				// this.dateTypeSelected = index;
				if (code !== "year") {
					if (code == 'year-month') {
						this.dateTypeSelected = 1;
					} else if (code == 'date') {
						this.dateTypeSelected = 2;
					}
					this.dateType = code;
					let sendData = {
						type: code,
						date: formatDate(this.showDate, code)
					};
					this.$emit("change", sendData);
				} else {
					this.dateTypeSelected = 0;
					let sendData = {
						type: "year",
						date: this.showDateYear
					};
					this.$emit("change", sendData);
				}
			},
			// 控件减
			minusDate() {
				if (this.dateTypeSelected == 1) {
					this.showDate = this.$moment(this.showDate).add(-1, "months")._d;
					// this.showDate = formatDate(this.showDate,'M');
					let sendData = {
						type: this.dateType,
						date: formatDate(this.showDate, this.dateType)
					};
					this.$emit("change", sendData);
				} else if (this.dateTypeSelected == 2) {
					this.showDate = this.$moment(this.showDate).add(-1, "days")._d;
					// this.showDate = formatDate(this.showDate,'d');
					let sendData = {
						type: this.dateType,
						date: formatDate(this.showDate, this.dateType)
					};
					this.$emit("change", sendData);
				} else {
					this.showDateYear -= 1;
					let sendData = {
						type: "year",
						date: this.showDateYear
					};
					this.$emit("change", sendData);
				}
			},
			// 控件加
			plusDate() {
				if (this.dateTypeSelected == 1) {
					this.showDate = this.$moment(this.showDate).add(1, "months")._d;
					let sendData = {
						type: this.dateType,
						date: formatDate(this.showDate, this.dateType)
					};
					this.$emit("change", sendData);
				} else if (this.dateTypeSelected == 2) {
					this.showDate = this.$moment(this.showDate).add(1, "days")._d;
					let sendData = {
						type: this.dateType,
						date: formatDate(this.showDate, this.dateType)
					};
					this.$emit("change", sendData);
				} else {
					this.showDateYear += 1;
					let sendData = {
						type: "year",
						date: this.showDateYear
					};
					this.$emit("change", sendData);
				}
			},
			// datetime-picker
			callPopup() {
				this.showPopup = true;
			},
			// datetime-picker
			formatter(type, val) {
				if (type === "year") {
					return `${val}年`;
				} else if (type === "month") {
					return `${val}月`;
				} else if (type === "day") {
					return `${val}日`;
				}
				return val;
			},
			// datetime-picker
			confirm() {
				let sendData = {
					type: this.dateType,
					date:  formatDate(this.showDate, this.dateType)
				};
				this.$emit("change", sendData);
				this.showPopup = false;
			},
			// datetime-picker
			cancel() {
				this.showPopup = false;
			},
			// datetime-picker
			format() {
				let newDate = "";
				if (this.dateType == "year-month") {
					newDate = this.$moment(this.showDate).format("YYYY-MM");
					// newDate = formatDate(newDate,'M');
				} else if (this.dateType == "date") {
					newDate = this.$moment(this.showDate).format("YYYY-MM-DD");
					// newDate = formatDate(newDate,'d');
				}
				return newDate;
			},
			// picker
			callPopupYear() {
				this.showPopupYear = true;
			},
			// picker
			onConfirmYear(value, index) {
				this.yearIndex = index;
				this.showDateYear = value;
				this.showPopupYear = false;
				let sendData = {
					type: "year",
					date: value
				};
				this.$emit("change", sendData);
			},
			// picker
			onCancelYear() {
				this.showPopupYear = false;
			},
			// picker-生成年份数据
			inityearColumns() {
				let thisYear = "";
				thisYear = this.$moment(new Date()).format("YYYY");
				this.showDateYear = Number(thisYear);
				let yearArray = [];
				for (let index = 0; index <= 10; index++) {
					yearArray.push(Number(thisYear) + index);
					yearArray.push(Number(thisYear) - index);
				}
				this.yearColumns = [...new Set(yearArray.sort())];
				this.yearIndex = 10;
			}
		},
		mounted() {
			this.dateType = this.type;
			this.inityearColumns();
			this.changeDateType(this.type)
		}
	};
</script>
<style lang="scss">
	.datepicks{
		height: 100%;
		line-height: 1;
		.flex-center-center {
		height: 100%;
			display: flex;
		
			>div {
				padding: 10px 0;
			}
		
			.date-show-box {
				margin-bottom: 20px;
				text-align: center;
				font-size: 14px;
				color: #acacac;
			}
		
			.date-show-bottom-box {
				flex: 1;
				padding: 10px 6px;
				text-align: center;
				font-size: 14px;
				color: #323233;
			}
		}
	}
	
</style>

要使用的父组件里这样编写

<datepick :type="type1" controls @change="dateChange"></datepick>

data() {
	return {
		type："year"
	}
}