uniapp+vue3预约时间和日期

picker组件

预约时间和日期，不能选择过去的日期时间

html 复制代码

<view class="whiteBox paddingBottom">
	<view class="title">预约上门时间</view>
	<picker mode="date" :value="nowDate" @change="bindDateChange" fields="day"
		style="border-bottom: 1rpx solid #E7E7E7;" :start="minDate">
		<view class="row">
			<view class="label">日期选择</view>
			<view class="value">{{nowDate ? nowDate : '请选择'}}</view>
		</view>
	</picker>
	<picker mode="time" :value="nowTime" @change="onTime" :start="minTime">
		<view class="row">
			<view class="label">时间选择</view>
			<view class="value">{{nowTime ? nowTime : '请选择'}}</view>
		</view>
	</picker>
</view>

javascript 复制代码

<script setup>
	import {
		ref,
		reactive,
		shallowRef
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import i from '@/libs/common/index.js'
	import api from '@/request/api.js'
	import throttle from '@/libs/function/throttle.js'
	import config from '@/libs/config/index.js'
	import {
		userStore
	} from '@/store/userStore.js'
	import {
		commonStore
	} from '@/store/commonStore.js'
	const user = userStore()
	const common = commonStore()
	
	const nowDate = ref(getDate({
		format: true
	})); // 当前日期
	const nowTime = ref(getTime({
		format: true
	})); // 当前时间
	const minDate = ref(getDate({
		format: true
	})); // 最小可选日期
	const minTime = ref(getTime({
		format: true
	})); // 最小可选时间

	function getTime({
		format
	} = {
		format: false
	}) {
		const date = new Date();
		let hours = date.getHours().toString().padStart(2, '0');
		let minutes = date.getMinutes().toString().padStart(2, '0');
		return format ? `${hours}:${minutes}` : date;
	}

	function getDate({
		format
	} = {
		format: false
	}) {
		const d = new Date();
		const year = d.getFullYear();
		const month = String(d.getMonth() + 1).padStart(2, '0');
		const day = String(d.getDate()).padStart(2, '0');
		return format ? `${year}-${month}-${day}` : d;
	}

	function bindDateChange(e) {
		const selectedDate = new Date(e.detail.value);
		selectedDate.setHours(0, 0, 0, 0); // 将选择的日期设置为当天的开始时间
		const today = new Date();
		today.setHours(0, 0, 0, 0);

		if (selectedDate.getTime() === today.getTime()) {
			// 选择的是今天，设置时间选择器的起始时间为当前时间，并重置当前时间为当前时间
			const currentTime = getTime({
				format: true
			});
			minTime.value = currentTime;
			nowTime.value = currentTime;
		} else {
			// 选择的是未来日期，时间选择器不限制，设置为00:00，并重置当前时间为00:00
			minTime.value = '00:00';
			nowTime.value = '00:00';
		}

		nowDate.value = e.detail.value;
	}

	function onTime(e) {
		const selectedTime = e.detail.value;
		nowTime.value = selectedTime;
	}


</script>

css 复制代码

.whiteBox {
	background: #FFFFFF;
	box-shadow: 0rpx 5rpx 15rpx 10rpx rgba(80, 80, 80, 0.0322);
	border-radius: 16rpx;
	margin: 0 30rpx 30rpx;
	padding-bottom: 40rpx;

	.title {
		padding-top: 30rpx;
		padding-left: 30rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #3D3D3D;
	}
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #E4E4E4;
		margin: 0 30rpx;
		padding: 30rpx 0;

		.label {
			font-size: 28rpx;
			color: #606266;
		}

		.value {
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}

	.row:last-child {
		border: none;
	}
}

.paddingBottom {
	padding-bottom: 0;
}