实现小程序的选择框（日期，大小等下拉框）

效果如下：

只需要修改两个文件，下面是具体代码：

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
    })
  }
})