用UNIAPP实现一个时间选择器,包括年(前5年后5年)、月、日、时、分 要求间隔10分钟
时间: 2024-05-03 18:17:19 浏览: 105
Uni-App的一个支持多类型选择(日期、日期时间、时间)的时间选择插件
可以使用uni-app内置的picker组件实现时间选择器。以下是一个实现示例:
1. 在页面模板中添加picker组件,同时绑定相应的数据和事件处理函数
```html
<template>
<view class="container">
<picker mode="date" :start="startDate" :end="endDate" @change="onDateChange">
<view class="picker-item">{{ date }}</view>
</picker>
<picker mode="time" :start="startTime" :end="endTime" :minute-list="minuteList" @change="onTimeChange">
<view class="picker-item">{{ time }}</view>
</picker>
</view>
</template>
```
2. 在页面中定义相应的data和方法
```javascript
<script>
export default {
data() {
return {
date: '', // 选择的日期
time: '', // 选择的时间
startDate: '', // 开始日期
endDate: '', // 结束日期
startTime: '', // 开始时间
endTime: '', // 结束时间
minuteList: [], // 分钟列表
}
},
mounted() {
// 初始化日期时间范围和分钟列表
const now = new Date()
const start = new Date(now.getFullYear() - 5, 0, 1)
const end = new Date(now.getFullYear() + 5, 11, 31)
const startHour = 0
const endHour = 23
const interval = 10
this.startDate = this.formatDate(start)
this.endDate = this.formatDate(end)
this.startTime = this.formatTime(startHour, 0)
this.endTime = this.formatTime(endHour, 50)
this.minuteList = this.generateMinuteList(interval)
},
methods: {
// 格式化日期
formatDate(date) {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
},
// 格式化时间
formatTime(hour, minute) {
return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`
},
// 生成分钟列表
generateMinuteList(interval) {
const minuteList = []
for (let i = 0; i < 60; i += interval) {
minuteList.push(i)
}
return minuteList.map((item) => (item < 10 ? '0' + item : item))
},
// 日期改变事件处理函数
onDateChange(event) {
this.date = event.detail.value
},
// 时间改变事件处理函数
onTimeChange(event) {
this.time = event.detail.value
},
},
}
</script>
```
3. 样式可以自行添加,这里不再赘述。
这样就完成了一个简单的时间选择器,包括年(前5年后5年)、月、日、时、分,并且要求时间间隔为10分钟。
阅读全文