年月日时分选择器

<template>
	<view class="container">
		<view class="btn" @click="timebtn">选择年月日时分 {{ resultDateTime }}</view>
		<!--日期选择弹窗-->
		<uni-popup ref="timeShow" @change="ggchange" backgroundColor="#fff" borderRadius="20px 20px 0 0">
			<view class="priceDate_pop">
				<view class="picker-container">
					<view class="picker-header">
						<view class="btn-cancel" @click="closedata">取消</view>
						<view class="btn-confirm" @click="onConfirm">确定</view>
					</view>
					<!-- 5列滚轮 picker-view -->
					<picker-view :value="pickerValue" indicator-style="height: 90rpx;" class="picker-view" @change="pickerChange">
						<!-- 第1列：年 -->
						<picker-view-column>
							<view class="picker-item" v-for="item in yearArr" :key="item">{{ item }}</view>
						</picker-view-column>
						<!-- 第2列：月 -->
						<picker-view-column>
							<view class="picker-item" v-for="item in monthArr" :key="item">{{ item }}</view>
						</picker-view-column>
						<!-- 第3列：日 -->
						<picker-view-column>
							<view class="picker-item" v-for="item in dayArr" :key="item">{{ item }}</view>
						</picker-view-column>
						<!-- 第4列：时 -->
						<picker-view-column>
							<view class="picker-item" v-for="item in hourArr" :key="item">{{ item }}</view>
						</picker-view-column>
						<!-- 第5列：分 -->
						<picker-view-column>
							<view class="picker-item" v-for="item in minuteArr" :key="item">{{ item }}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pickerValue: [0, 0, 0, 0, 0],
			yearArr: [],
			monthArr: [],
			dayArr: [],
			hourArr: [],
			minuteArr: [],
			resultDateTime: "",
		}
	},
	onLoad() {
		this.initBaseArr();
	},
	methods: {
		initBaseArr() {
			// 年份范围 2020~2035
			for (let i = 2020; i <= 2035; i++) {
				this.yearArr.push(i);
			}
			// 月份1‑12
			for (let i = 1; i <= 12; i++) {
				this.monthArr.push(i);
			}
			// 小时0‑23
			for (let i = 0; i <= 23; i++) {
				this.hourArr.push(i);
			}
			// 分钟0‑59
			for (let i = 0; i <= 59; i++) {
				this.minuteArr.push(i);
			}
		},
		timebtn() {
			const now = new Date();
			const curYear = now.getFullYear();
			const curMonth = now.getMonth() + 1; // js月份0‑11转1‑12
			const curDay = now.getDate();
			const curHour = now.getHours();
			const curMin = now.getMinutes();

			const yIdx = this.yearArr.indexOf(curYear);
			const mIdx = this.monthArr.indexOf(curMonth);

			// 更新当月日期数组
			this.updateDayList(curYear, curMonth);
			let dIdx = curDay - 1;
			// 兜底防止下标越界
			if (dIdx >= this.dayArr.length) {
				dIdx = this.dayArr.length - 1;
			}
			this.$nextTick(() => {
				this.pickerValue = [
					yIdx > -1 ? yIdx : 0,
					mIdx > -1 ? mIdx : 0,
					dIdx,
					curHour,
					curMin
				];
				this.$refs.timeShow.open('bottom');
			});
		},
		closedata() {
			this.$refs.timeShow.close();
		},
		// 根据 年、月 获取当月总天数，更新日期数组
		updateDayList(year, month) {
			const lastDay = new Date(year, month, 0).getDate();
			this.dayArr = [];
			for (let i = 1; i <= lastDay; i++) {
				this.dayArr.push(i);
			}
		},
		// picker滚动事件
		pickerChange(e) {
			const val = e.detail.value;
			const y = this.yearArr[val[0]];
			const m = this.monthArr[val[1]];
			this.updateDayList(y, m);

			let dayIndex = val[2];
			if (dayIndex >= this.dayArr.length) {
				dayIndex = this.dayArr.length - 1;
			}
			this.pickerValue = [val[0], val[1], dayIndex, val[3], val[4]];
		},
		// 确定选择
		onConfirm() {
			const [yIdx, mIdx, dIdx, hIdx, miIdx] = this.pickerValue;
			const y = this.yearArr[yIdx];
			const m = this.monthArr[mIdx];
			const d = this.dayArr[dIdx];
			const h = this.hourArr[hIdx];
			const mi = this.minuteArr[miIdx];
			const fmt = `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")} ${String(h).padStart(2, "0")}:${String(mi).padStart(2, "0")}`;
			this.resultDateTime = fmt;
			console.log("选中时间：", fmt);
			this.$refs.timeShow.close();
		},
	}
}
</script>
<style lang="scss">
.priceDate_pop {width: 100%;}
.picker-container {width:100%;background:#ffffff;border-radius:16rpx 16rpx 0 0;}
.picker-header {display:flex;justify-content:space-between;padding:30rpx 40rpx;border-bottom:1rpx solid #eeeeee;}
.btn-cancel {font-size:32rpx;color:#666666;}
.btn-confirm {font-size:32rpx;color:#ff0000;}
.picker-view {height:450rpx;}
.picker-item {height:90rpx;line-height:90rpx;text-align:center;font-size:32rpx;}
</style>