效果如下:
只需要修改两个文件,下面是具体代码:
index.wxml
<!-- 日期部分 -->
<view class = "item">
<text>预约日期:</text>
<picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
{{dateValue}}
</picker>
</view>
<!-- 时间部分 -->
<view class = "item">
<text>开始时间:</text>
<picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange">
{{timeValue}}
</picker>
</view>
<!-- 面积部分 -->
<view class = "item">
<text>房屋面积:</text>
<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">
{{picker1Range[picker1Value]}}
</picker>
<text>㎡</text>
<text class = "remind">(以便自动计算保洁时间和服务人数)</text>
</view>
index.wxss
Page({
data:{
picker1Value:0,
picker1Range:['请选择','50以下','50-89','90-129','130-139','140-149','150-159','160-169','170-179','180以上'],
dateValue:' 请选择您的预约日期',
timeValue:' 请选择具体的时间'
},
normalPickerBindchange:function(e){
this.setData({
picker1Value:e.detail.value
})
},
timePickerBindchange:function(e){
this.setData({
timeValue:e.detail.value
})
},
datePickerBindchange:function(e){
this.setData({
dateValue:e.detail.value
})
}
})