up-datetime-picker设置最小选择时间一个半小时后

uniapp yekong

uniapp微信小程序开发过程中,有一个需求是,选择日期时间时,最小时间是当前时间的一个半小时后。这里我们使用的是uview3下面的up-datetime-picker组件。

up-datetime-picker设置最小选择时间一个半小时后

实例代码

<template>
	<div>
		<div class="slot" @click="getShow">
			<slot></slot>
		</div>
		<!-- 时间选择器 -->
		<up-datetime-picker ref="datetimePickerRef" title='时间选择' :formatter='formatter' :show="show"
			:value="value" @confirm="handleConfirm" cancelColor="rgba(51, 51, 51, 1)" confirmText='确定'
			confirmColor='rgba(71, 133, 255, 1)' @cancel="handleCancel" mode="datetime" :min-date="minDate"></up-datetime-picker>
	</div>
</template>

<script>
	export default {
		props: {
			value: String  // 接收从父组件传入的时间值
		},
		data() {
			return {
				show: false,
				minDate: this.getMinDate(),  // 设置为当前时间一个半小时后
			};
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分`;
				}
				return value;
			},
			handleConfirm(value) {
				this.show = false;
				this.$emit('update:value', value.value);  // 触发事件,传回选中的日期
				console.log('日期更新为:', value);
			},
			handleCancel() {
				this.show = false;
				console.log('日期选择已取消');
			},
			getShow() {
				this.show = true;
			},
			getMinDate() {
				const now = new Date();
				now.setMinutes(now.getMinutes() + 90);  // 当前时间加90分钟
				return now.toISOString();
			}
		}
	}
</script>
喜欢