1. 程式人生 > >微信小程式 選項 、時間日期選擇器

微信小程式 選項 、時間日期選擇器

wxml:

<view class="section" >  
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">  
    <view class="picker">  
      國家:{{objectArray[index]}}  
    </view>  
  </picker>  
</view>  

<view class="section">
<picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange"> <view class="picker"> 時間 : {{times}} </view> </picker> </view> <view class="section"> <picker mode="date" value="{{date}}" start="1978-01-01" end
="2017-1-23" bindchange="bindDateChange"> <view class="picker"> 日期: {{dates}} </view> </picker> </view>

js:

Page({
  data: {
    dates: '2016-11-08',
    times: '12:00',
    objectArray: ['中國', '英國', '美國'],
    index: 0,
  },
  //  點選時間元件確定事件  
  bindTimeChange: function
(e) { console.log("誰哦按") this.setData({ times: e.detail.value }) }, // 點選日期元件確定事件 bindDateChange: function (e) { console.log(e.detail.value) this.setData({ dates: e.detail.value }) }, // 點選城市元件確定事件 bindPickerChange: function (e) { console.log(e.detail.value) this.setData({ index: e.detail.value }) }