vue日期时间选择器（支持年、年月、年月日、年月日时、年月日时分、年月日时分秒）

效果图

组件参数说明

column参数说明：

1. 年
2. 年月
3. 年月日
4. 年月日时
5. 年月日时分
6. 年月日时分秒

startYear： 开始年份

annual：开始年份向后 annual 年

组件代码

<template>
	<picker style="width: 100%;"
		:style="{'line-height':lineHeight,'text-align':textAlign}"
		mode="multiSelector"
		@change="bindMultiPickerChange"
		@columnchange="bindMultiPickerColumnChange"
		:value="multiIndex"
		:range="multiArray"
		>
		{{time}}
		<text v-if="time == ''" style="color: #888888;">选择时间</text>
	</picker>
</template>

<script>
	const years = [];
	const months = [];
	const days = [];
	const hours = [];
	const minutes = [];
	const miao = [];
	export default {
		name: 'sun-pickerDateTime',
		props: {
			/**
			 * 1~6
			 */
			column: {
				type: Number,
				default: () => 6
			},
			/**
			 * center left right
			 */
			textAlign: {
				type: String,
				default: 'center'
			},
			/**
			 * 所有像素单位
			 */
			lineHeight: {
				type: String,
				default: '60rpx'
			},
			/**
			 * 开始年份
			 */
			startYear: {
				type: Number,
				default: () => new Date().getFullYear()
			},
			/**
			 * 总年度
			 */
			annual: {
				type: Number,
				default: () => 10
			},
		},
		data() {
			return {
				multiIndex: [0, 0, 0, 0, 0, 0],
				multiArray: [years, months, days, hours, minutes, miao],
				time: '',
				choose_year: '',
				default_column: 6
			}
		},
		/**
		 * 实例初始化完成 最早可操作 data 中数据 和 methods 中方法的地方
		 */
		created() {
			const date = new Date();
			console.log(this.startYear)
			if (this.default_column !== this.column) {
				this.multiArray.splice(this.column, this.default_column - this.column);
				this.multiIndex.splice(this.column, this.default_column - this.column);
			}
			//获取年
			for (let i = this.startYear; i <= this.startYear + this.annual; i++) {
				years.push("" + i);
			}
			this.choose_year = this.multiArray[0][0]
			if (this.column === 1) return false;
			//获取月份
			for (let i = 1; i <= 12; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				months.push("" + i);
			}
			if (this.column === 2) return false;
			//获取日期
			for (let i = 1; i <= 31; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				days.push("" + i);
			}
			if (this.column === 3) return false;
			//获取小时
			for (let i = 0; i < 24; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				hours.push("" + i);
			}
			if (this.column === 4) return false;
			//获取分钟
			for (let i = 0; i < 60; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				minutes.push("" + i);
			}
			if (this.column === 5) return false;
			//获取秒
			for (let i = 0; i < 60; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				miao.push("" + i);
			}
		},
		/**
		 * 方法函数
		 */
		methods: {
			//获取时间日期
			bindMultiPickerChange: function(e) {
				const _that = this;
				_that.multiIndex = e.detail.value;
				const index = _that.multiIndex;
				const year = _that.multiArray[0][index[0]];
				_that.time = year
				if (_that.column === 1) return false;
				const month = _that.multiArray[1][index[1]];
				_that.time = _that.time + '-' + month
				if (_that.column === 2) return false;
				const day = _that.multiArray[2][index[2]];
				_that.time = _that.time + '-' + day
				if (_that.column === 3) return false;
				const hour = _that.multiArray[3][index[3]];
				_that.time = _that.time + ' ' + hour
				if (_that.column === 4) return false;
				const minute = _that.multiArray[4][index[4]];
				_that.time = _that.time + ':' + minute
				if (_that.column === 5) return false;
				const miao = _that.multiArray[5][index[5]];
				_that.time = _that.time + ':' + miao
			},
			//监听picker的滚动事件
			bindMultiPickerColumnChange: function(e) {
				const _that = this;
				//获取年份
				if (e.detail.column == 0) {
					_that.choose_year = _that.multiArray[e.detail.column][e.detail.value];
				}
				if (_that.column < 3) return false;
				if (e.detail.column == 1) {
					let num = parseInt(_that.multiArray[e.detail.column][e.detail.value]);
					let temp = [];
					if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
						// for (let i = 1; i <= 31; i++) {
						// 	if (i < 10) {
						// 		i = "0" + i;
						// 	}
						// 	temp.push("" + i);
						// }
						return false;
					} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
						for (let i = 1; i <= 30; i++) {
							if (i < 10) {
								i = "0" + i;
							}
							temp.push("" + i);
						}
					} else if (num == 2) { //判断2月份天数
						let year = parseInt(_that.choose_year);
						if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
							for (let i = 1; i <= 29; i++) {
								if (i < 10) {
									i = "0" + i;
								}
								temp.push("" + i);
							}
						} else {
							for (let i = 1; i <= 28; i++) {
								if (i < 10) {
									i = "0" + i;
								}
								temp.push("" + i);
							}
						}
					}
					_that.multiArray[2] = temp
					_that.$forceUpdate();
				}
			}
		},
	}
</script>

使用案例

<uni-pickerDateTime :column="6" :startYear="2021" :annual="5"></uni-pickerDateTime>