WeChat Open Platform

Mini Programs Documentation

picker

A scroll selector that pops up from the bottom. Three selectors are currently supported, these are differentiated by mode and are the ordinary selector, time selector, and date selector respectively. The default is the ordinary selector.

Ordinary selector: mode = selector

Attribute name Type Default value Description
range Array / Object Array [] range is effective when mode is selector
range-key String When range is an Object Array, the key value specified in Object by range-key acts as the selector display content
value Number 0 The value indicates the ordinal within the selected range (subscript starts from 0)
bindchange EventHandle A change event triggered when the value changes, event.detail = {value: value}
disabled Boolean false Whether disabled

Time selector: mode = time

Attribute name Type Default value Description
value String Indicates selected time, format is "hh:mm"
start String Indicates start of effective time range, string format is "hh:mm"
end String Indicates end of effective time range, string format is "hh:mm"
bindchange EventHandle A change event triggered when the value changes, event.detail = {value: value}
disabled Boolean false Whether disabled

Date selector: mode = date

Attribute name Type Default value Description
value String 0 Indicates selected date, format is "YYYY-MM-DD"
start String Indicates start of effective date range, string format is "YYYY-MM-DD"
end String Indicates end of effective date range, string format is "YYYY-MM-DD"
fields String day Valid values are year, month, and day, indicates selector granularity
bindchange EventHandle A change event triggered when the value changes, event.detail = {value: value}
disabled Boolean false Whether disabled

fields valid values:

Value Description
year Selector granularity is year
month Selector granularity is month
day Selector granularity is day

Note: Development tools temporarily only support mode = selector.

Sample code:

<view class="section">
  <view class="section__title">Region selector</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      Current selection: {{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">Time selector</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      Current selection: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">Date selector</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      Current selection: {{date}}
    </view>
  </picker>
</view>
Page({
  data: {
    array: ['USA', 'China', 'Brazil', 'Japan'],
    objectArray: [
      {
        id: 0,
        name: 'USA'
      },
      {
        id: 1,
        name: 'China'
      },
      {
        id: 2,
        name: 'Brazil'
      },
      {
        id: 3,
        name: 'Japan'
      }
    ],
    index: 0,
    date: '2016-09-01',
    time: '12:01'
  },
  bindPickerChange: function(e) {
    console.log('picker sent selection change, the value brought is', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange: function(e) {
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    this.setData({
      time: e.detail.value
    })
  }
})

picker