concrete-transportation-uniapp-20250821/components/select-datetime.vue

<template>
	<view>
		<picker mode="multiSelector" :range="range" @change="handleChange">
			<!-- <view class="picker">
				{{range[0][value[0]]}}年{{range[1][value[1]]}}月{{range[2][value[2]]}}日 
				{{range[3][value[3]]}}时{{range[4][value[4]]}}分
			</view> -->
			<slot></slot>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [
					// 年
					[],
					// 月
					[],
					// 日
					[],
					// 时
					[],
					// 分
					[]
				],
				value: [0, 0, 0, 0, 0] // 默认值
			};
		},
		mounted() {
			// 初始化年月日时分范围
			this.initDateRange();
		},
		methods: {
			initDateRange() {

				const now = new Date();
				const year = now.getFullYear();
				const yearx = now.getFullYear();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const hour = now.getHours();
				const minute = now.getMinutes();

				this.value = [yearx, month, day, hour, minute]

				const years = [];
				for (let i = year; i <= year + 10; i++) {
					years.push(i > 9 ? i : '0' + 1);
				}

				const months = [];
				for (let i = 1; i <= 12; i++) {
					months.push(i > 9 ? i : '0' + i);
				}

				const days = [];
				const daysInMonth = new Date(year, month, 0).getDate();
				for (let i = 1; i <= daysInMonth; i++) {
					days.push(i > 9 ? i : '0' + i);
				}

				const hours = [];
				for (let i = 0; i < 24; i++) {
					hours.push(i > 9 ? i : '0' + i);
				}

				const minutes = [];
				for (let i = 0; i < 60; i++) {
					minutes.push(i > 9 ? i : '0' + i);
				}

				this.range = [years, months, days, hours, minutes];
				//this.value = [
				//	years.indexOf(year), months.indexOf(month), days.indexOf(day),
				//	hours.indexOf(hour), minutes.indexOf(minute)
				//];
			},
			handleChange(e) {
				this.value = e.detail.value
				const str =
					`${this.range[0][this.value[0]]}-${this.range[1][this.value[1]]}-${this.range[2][this.value[2]]} ${this.range[3][this.value[3]]}:${this.range[4][this.value[4]]}:00`;
				if (!this.isFutureDate(str)) {
					uni.showToast({
						title: "不可以早于当前时间",
						icon: "none"
					})
					return;
				}
				this.$emit("selected", str)
			},
			isFutureDate(data) {
				let m = String(data).replace("年", "-").replace("月", "-").replace("日","").replace("时",":").replace("分",":00")
				let inputDate = new Date(m);
				let currentDate = new Date();
				return inputDate > currentDate;
			}
		}
	};
</script>

<style>
	.picker {
		padding: 15px;
		background-color: #f0f0f0;
		text-align: center;
	}
</style>