当前位置：首页 > news >正文

uniapp+vue3预约时间和日期

news 2025/7/24 6:32:54

picker组件

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

<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>

<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:00minTime.value = '00:00';nowTime.value = '00:00';}nowDate.value = e.detail.value;}function onTime(e) {const selectedTime = e.detail.value;nowTime.value = selectedTime;}</script>

.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;
}