uniapp微信小程序开发过程中,有一个需求是,选择日期时间时,最小时间是当前时间的一个半小时后。这里我们使用的是uview3下面的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>