# picker

Start from base library version 1.0.0. Please remaining backward compatible.

A rolling selector that pops up from the bottom.

attribute type Default value Required Introductions Minimum version
header-text string no Selector Title, available for Android only 2.11.0
mode string selector no Selector type 1.0.0
disabled boolean false no Is it disabled? 1.0.0
bindcancel eventhandle no Triggered when deselect 1.9.90

mode Legal value

value Introductions Minimum version
selector Common selector
multiSelector Multi-column selector
time Time selector
date Date picker
region Provincial urban selector

In addition to the general properties above, for different modes,pickerHave different properties.

# Common selector: mode = selector

Attribute name type Default value Introductions Minimum version
range array/object array [] mode for selector or multiSelector Range effective
range-key string when range It's a... Object Array When the range-key To specify Object in key Displays content as a selector
value number 0 Indicate that you have chosen range Whose subscript is derived from the 0 Start.)
bindchange eventhandle value Triggered when changed change Event, event.detail = {value}

# Multiple column selector: mode = multiSelector

Attribute name type Default value Introductions Minimum version
range array/object array [] mode for selector or multiSelector Range effective
range-key string when range It's a... Object Array When the range-key To specify Object in key Displays content as a selector
value array [] Indicate that you have chosen range Whose subscript is derived from the 0 Start.)
bindchange eventhandle value Triggered when changed change Event, event.detail = {value}
bindcolumnchange eventhandle Triggered when column changes

# Time picker: mode = time

Attribute name type Default value Introductions Minimum version
value string Indicates the selected time in the format "hh: mm"
start string Represents the beginning of a valid time range, with the string format "hh: mm"
end string Represents the end of a valid time range, with the string format "hh: mm"
bindchange eventhandle value Triggered when changed change Event, event.detail = {value}

# Date picker: mode = date

Attribute name type Default value Introductions Minimum version
value string Same day Represents the selected date in the format "YYYY-MM-DD"
start string Represents the start of a valid date range, with a string format of "YYY-YM-MD-DD"
end string Represents the end of a valid date range in the string format "YYY-MM-DD"
fields string day Valid value Year, month, day, represents the granularity of the selector
bindchange eventhandle value Triggered when changed change Event, event.detail = {value}

fields Valid value:

value Introductions
year Selector granularity is year
month Selector granularity is month
day Selector granularity is day

# Provincial and municipal selectors: mode = region 1.4.0

Attribute name type Default value Introductions Minimum version
value array [] Represents the selected province, with the first value in each column selected by default
custom-item string You can add a custom item to the top of each column 1.5.0
bindchange eventhandle value Triggered when changed change Event, event.detail = {value, code, Postcode}, where the fields code Is a statistical zoning code, postcode It's a zip code.

# sample code

Preview with Developer Tool

<view class="section">
  <view class="section__title">Common 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">Multi-column selector</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      Current selection: {{MultiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    </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 picker</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>
<view class="section">
  <view class="section__title">Provincial urban selector</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      Current selection: {{region[0]}},{{region[1]}},{{region[2]}}
    </view>
  </picker>
</view>
Page({
  data: {
    array: ["America", "China", 'Brazil ', "Japan"],
    objectArray: [
      {
        id: 0,
        name: "America"
      },
      {
        id: 1,
        name: "China"
      },
      {
        id: 2,
        name: "Brazil"
      },
      {
        id: 3,
        name: "Japan"
      }
    ],
    index: 0,
    multiArray: [[Spineless animals, "Spinal animals"], ['Flatness', 'linear animals', "Annelid", "Mollusca", "arthropod"], [Pork tapeworm. 'bloodsucking bug']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: "Spineless animals"
        },
        {
          id: 1,
          name: "Spinal animals"
        }
      ], [
        {
          id: 0,
          name: "Flat animal"
        },
        {
          id: 1,
          name: 'linear animal'
        },
        {
          id: 2,
          name: "annelid"
        },
        {
          id: 3,
          name: "mollusk"
        },
        {
          id: 3,
          name: "arthropod"
        }
      ], [
        {
          id: 0,
          name: Pork tapeworm
        },
        {
          id: 1,
          name: 'bloodsucking bug'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['Guangdong province ', 'Guangzhou City ', Haizhu district],
    customItem: "All"
  },
  bindPickerChange: function(e) {
    console.log('picker sends selection change, carries value of ', e.detail.value)
    this.setData({
      index: and.detail.value
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker sends selection change, carries value of ', e.detail.value)
    this.setData({
      multiIndex: and.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('Modified listing ', and.detail.column, ', with a value of', e.detail.value)
    where data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    }
    data.multiIndex[and.detail.column] = and.detail.value
    switch (and.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['Flatness', 'linear animals', "Annelid", "Mollusca", "arthropod"]
            data.multiArray[2] = [Pork tapeworm. 'bloodsucking bug']
            break
          case 1:
            data.multiArray[1] = ["Fish," "Amphibians", "Reptile"]
            data.multiArray[2] = [Crucian carp, Hairtail]
            break
        }
        data.multiIndex[1] = 0
        data.multiIndex[2] = 0
        break
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = [Pork tapeworm. 'bloodsucking bug']
                break
              case 1:
                data.multiArray[2] = [Ascaris lumbricoides]
                break
              case 2:
                data.multiArray[2] = ["Ant", "Leech"]
                break
              case 3:
                data.multiArray[2] = [Mussel, "Snail", "Slugs"]
                break
              case 4:
                data.multiArray[2] = ["Insects," "Crustaceans", "Arachnid", "Myriapod"]
                break
            }
            break
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = [Crucian carp, Hairtail]
                break
              case 1:
                data.multiArray[2] = ["Frog", "The Salamander"]
                break
              case 2:
                data.multiArray[2] = ["Lizard", "Turtle", "Gecko"]
                break
            }
            break
        }
        data.multiIndex[2] = 0
        break
    }
    console.log(data.multiIndex)
    this.setData(data)
  },
  bindDateChange: function(e) {
    console.log('picker sends selection change, carries value of ', e.detail.value)
    this.setData({
      date: and.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker sends selection change, carries value of ', e.detail.value)
    this.setData({
      time: and.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker sends selection change, carries value of ', e.detail.value)
    this.setData({
      region: and.detail.value
    })
  }
})