效果

html程式碼

<view class="section">
  <view class="section__title">省市區選擇器</view>
  <picker mode="region" bindchange="bindRegionChange" value="" custom-item="">
    <view class="picker">
      當前選擇：
      <view wx:if="{{region}}">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">時間選擇器</view>
  <picker mode="time" value="" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      當前選擇: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期選擇器</view>
  <picker mode="date" value="" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      當前選擇: {{date}}
    </view>
  </picker>
</view>
 

css程式碼

.section{
  padding: 20rpx;
  border-bottom: 1px solid #aaaaaa;
}

js程式碼

Page({
  data: {
    region: "",
    time: "",
    date: ""
  },
  bindRegionChange(e) {
    let { value } = e.detail;
    console.log("地區改變:", value);
    this.setData({
      region: value
    })
  },
  bindTimeChange(e) {
    let { value } = e.detail;
    console.log("時間改變:", value);
    this.setData({
      time: value
    })
  },
  bindDateChange(e) {
    let { value } = e.detail;
    console.log("日期改變:", value);
    this.setData({
      date: value
    })
  },
});