UniApp设置时间选择器,先在左边选择今天、明天、后天中的任意一天,再从某一天中选择9:00-18:00中的某一个具体的小时区间,如: 今天 9:00-10:00,但是选择的时间要根据目前的具体时间进行判断
时间: 2024-12-16 10:16:41 浏览: 14
在UniApp中,你可以使用WXML和JS部分来创建一个类似时间选择器的功能。首先,你需要结合`time-picker`组件和一些自定义逻辑来实现这个功能。以下是简单的步骤:
1. 引入组件:在WXML文件中引入`<time-picker>`组件。
```html
<view class="container">
<time-picker bindchange="onTimePickerChange" :show-now="true"></time-picker>
</view>
```
2. 创建JS部分:定义`onTimePickerChange`方法,获取用户选择的时间,并根据当前时间动态限制选择范围。
```javascript
Page({
data: {
today: new Date(),
timeRange: ['9:00', '18:00'],
},
onTimePickerChange(e) {
const selectedDate = e.detail.value.date; // 用户选择的日期
const selectedHour = e.detail.value.hour; // 用户选择的小时
// 判断是否允许选择昨天、今天或明天
const allowedDates = [selectedDate.setDate(selectedDate.getDate() - 1), selectedDate.setDate(selectedDate.getDate()), selectedDate.setDate(selectedDate.getDate() + 1)];
if (!allowedDates.includes(selectedDate)) {
this.setData({ timeRange: ['9:00', '18:00'] }); // 如果不在允许范围内,重置到默认时间
return;
}
// 检查是否在工作时间内
if (selectedHour < 9 || selectedHour > 18) {
this.setData({ timeRange: ['9:00', '18:00'] });
} else {
this.setData({ selectedDate, selectedHour });
}
},
})
```
在这个例子中,我们假设用户只能选择前一天、当天或后一天,并且工作时间限定在9:00到18:00之间。当用户改变选择时,会触发`onTimePickerChange`函数,检查并更新显示的范围。
阅读全文