<template>
<view>
<view class="uni-title uni-common-pl">时间选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="selector" :value="timeIndex" range="{{timeRange}}" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
time: '', // 当前选择的时间
timeIndex: 0, // 当前选择的时间索引
timeRange: [] // 时间选择器的可选项
};
},
mounted() {
this.generateTimeRange();
},
methods: {
generateTimeRange() {
const startTime = new Date("2000/01/01 08:00");
const endTime = new Date("2000/01/01 22:00");
const timeOptions = [];
while (startTime <= endTime) {
const hour = String(startTime.getHours()).padStart(2, '0');
const minute = String(startTime.getMinutes()).padStart(2, '0');
const timeOption = `${hour}:${minute}`;
timeOptions.push(timeOption);
startTime.setMinutes(startTime.getMinutes() + 30);
}
this.timeRange = timeOptions;
this.time = timeOptions[0];
},
bindTimeChange(e) {
const selectedTimeIndex = e.mp.detail.value;
this.timeIndex = selectedTimeIndex;
this.time = this.timeRange[selectedTimeIndex];
}
}
};
</script>
uniapp vue 前端页面半小时选择器
最新推荐文章于 2024-08-07 02:52:26 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)