picker选择器

普通选择器: mode = selector

属性	类型	默认值	说明
Range	Array / Object Array	0	mode=selector时，range有效
range-key	String		当range是一个Object时，通过range-key来指定Object中key的值作为选择0器显示内容
Value	Number	0	value的值表示选择了rangezh中的第几个
Bindchange	EventHandle		value改变触发了change事件
disabled	Boolean	false	是否禁用

下面的值，触发了上面的事件，显示选择器
wxml的代码：

<view class="section">
  <view class="section_title">地区选择器</view>
  <picker bindchange="bindChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选中:{{array[index]}}
    </view>
  </picker>
</view>

js代码:

Page({
  data:{
  array:['美国','中国','日本'],
  object:[
    {
      id: 0,
      name: '美国'
    },
    {
      
      id:1,
      name:'中国'
    },
    {
      id:2,
      name:'日本'
    }
  ],
  index:0
  },
  bindChange:function(e){
    console.log(e.detail.value)
    this.setData({
      index:e.detail.value
    })
  }
})

时间选择器： mode = time
不同： picker中的 mode =time

属性	类型	说明
start	String	表示时间的开始范围，字符串格式为“hh:mm”
end	String	表示时间的结束范围，字符串格式为“hh:mm”

wxml代码：

<view class="section">
  <view class="section_title">
    <picker mode="time" value="{{value}}" start="09:01" end="21:01" bindchange="bindchange">
      <view class="picker">
        当前选中:{{time}}
      </view>
    </picker>
  </view>
</view>

js代码:

Page({
  data:{
    time:'12:01'
  },
  bindchange:function(e){
    this.setData({
      time:e.detail.value
    })
  }
})

日期选择器, mode = date

不同： picker中的 mode =time

属性	类型	说明
start	String	表示日期的开始范围，字符串格式为“yyyy-mm–dd”
end	String	表示时间的结束范围，字符串格式为"yyyy-mm–dd”
field	String	有效值为year、month、day,表示只有这个选择器