uniapp多个时间选择器
时间: 2025-05-10 14:25:16 浏览: 12
### 多个时间选择器的实现
在 UniApp 中,可以利用 `uni-datetime-picker` 组件或其他类似的自定义组件来实现多个时间选择器的功能。通过设置不同的绑定变量以及事件回调函数,能够轻松管理多个时间选择器的行为。
以下是基于 `uni-datetime-picker` 的多实例实现示例:
```html
<template>
<view class="container">
<!-- 时间选择器1 -->
<button type="primary" @click="showPicker1 = true">选择时间1</button>
<uni-datetime-picker v-model="timeValue1" :clear-icon="false" :mask-click="false" mode="datetime"
v-if="showPicker1" @confirm="onConfirm1" @cancel="showPicker1 = false"></uni-datetime-picker>
<!-- 时间选择器2 -->
<button type="primary" @click="showPicker2 = true">选择时间2</button>
<uni-datetime-picker v-model="timeValue2" :clear-icon="false" :mask-click="false" mode="date"
v-if="showPicker2" @confirm="onConfirm2" @cancel="showPicker2 = false"></uni-datetime-picker>
<!-- 显示选中的时间 -->
<text>已选时间1: {{ timeValue1 }}</text>
<text>已选时间2: {{ timeValue2 }}</text>
</view>
</template>
<script>
export default {
data() {
return {
showPicker1: false, // 控制第一个时间选择器显示/隐藏
showPicker2: false, // 控制第二个时间选择器显示/隐藏
timeValue1: '', // 第一个时间选择器的值
timeValue2: '' // 第二个时间选择器的值
};
},
methods: {
onConfirm1(e) {
this.timeValue1 = e.result;
this.showPicker1 = false; // 隐藏弹窗
},
onConfirm2(e) {
this.timeValue2 = e.result;
this.showPicker2 = false; // 隐藏弹窗
}
}
};
</script>
<style scoped>
.container {
padding: 20px;
}
</style>
```
#### 关键说明
- **v-model**:用于双向绑定时间选择器的值[^1]。
- **mode 属性**:指定时间选择器模式(如 `date`, `time`, 或者 `datetime`),可以根据需求调整不同选择器的类型[^2]。
- **@confirm 和 @cancel**:分别处理确认和取消操作,确保用户体验流畅并更新数据[^3]。
如果需要更复杂的定制化功能,比如支持更多的时间粒度或者特定样式,则可以通过引入其他第三方库或自行封装组件完成。
---
阅读全文
相关推荐















