Picker

The scroll picker that pops up from the lower part.

Reference

Type

ComponentType<PickerSelectorProps | PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps>

Examples

React

export default class PagePicker extends Component {
  state = {
    selector: ['United States', 'China', 'Brazil', 'Japan'],
    selectorChecked: 'United States',
    timeSel: '12:01',
    dateSel: '2018-04-22'
  }

  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    })
  }

  onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    })
  }
  onDateChange = e => {
    this.setState({
      dateSel: e.detail.value
    })
  }

  render () {
    return (
      <View className='container'>
        <View className='page-body'>
          <View className='page-section'>
            <Text>Province, city, and district picker</Text>
            <View>
              <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                <View className='picker'>
                  Currently selected: {this.state.selectorChecked}
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text>Time picker</Text>
            <View>
              <Picker mode='time' onChange={this.onTimeChange}>
                <View className='picker'>
                  Currently selected: {this.state.timeSel}
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text>Date picker</Text>
            <View>
              <Picker mode='date' onChange={this.onDateChange}>
                <View className='picker'>
                  Currently selected: {this.state.dateSel}
                </View>
              </Picker>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

Vue

<template>
  <view class="page-body">
    <view class="page-section">
      <text>Province, city, and district picker</text>
      <view>
        <picker mode="selector" :range="selector" @change="onChange">
          <view class="picker">
            Currently selected: {{selectorChecked}}
          </view>
        </picker>
      </view>
    </view>
    <view class="page-section">
      <text>Time picker</text>
      <view>
        <picker mode="time" @change="onTimeChange">
          <view class="picker">
            Currently selected: {{timeSel}}
          </view>
        </picker>
      </view>
    </view>
    <view class="page-section">
      <text>Date picker</text>
      <view>
        <picker mode="date" @change="onDateChange">
          <view class="picker">
            Currently selected: {{dateSel}}
          </view>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        selector: ['United States', 'China', 'Brazil', 'Japan'],
        selectorChecked: 'United States',
        timeSel: '12:01',
        dateSel: '2018-04-22'
      }
    },
    methods: {
      onChange: function(e) {
        this.selectorChecked = this.selector[e.detail.value]
      },

      onTimeChange: function(e) {
        this.timeSel = e.detail.value
      },

      onDateChange: function(e) {
        this.dateSel = e.detail.value
      }
    }
  }
</script>

PickerStandardProps

Selector General Parameters

Property	Type	Default	Required	Description
mode	"selector" | "multiSelector" | "time" | "date" | "region"	"selector"	Yes	The type of the picker
disabled	boolean	false	No	Specifies whether to disable the component.
onCancel	BaseEventOrigFunction<any>		No	Triggered when selection is canceled

Property Support

Property	WeChat Mini-Program	H5	React Native
PickerStandardProps.mode	✔️	✔️	✔️
PickerStandardProps.disabled	✔️	✔️	✔️
PickerStandardProps.onCancel	✔️	✔️	✔️

mode

Valid values of mode

Value	Description
selector	Common picker
multiSelector	Multi-column picker
time	Time picker
date	Date picker
region	Province, city, and district picker

PickerSelectorProps

Common picker: mode = selector

Property	Type	Default	Required	Description
mode	"selector"		Yes	The type of the picker
range	string[] | number[] | Object[]	[]	Yes	Valid when the mode is selector or multiSelector.
rangeKey	string		No	Specifies the key value of the object as the content to be displayed on the picker when range is an object array.
value	number	0	Yes	Indicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChange	BaseEventOrigFunction<onChangeEventDetail>		Yes	A change event is triggered when value is changed. event.detail = {value}

Property Support

Property	WeChat Mini-Program	H5	React Native
PickerSelectorProps.range	✔️	✔️	✔️
PickerSelectorProps.rangeKey	✔️	✔️	✔️
PickerSelectorProps.value	✔️	✔️	✔️
PickerSelectorProps.onChange	✔️	✔️	✔️

onChangeEventDetail

Param	Type	Description
value	string | number	Indicates the subscript of the changed value

PickerMultiSelectorProps

Multi-column picker: mode = multiSelector

Property	Type	Default	Required	Description
mode	"multiSelector"		Yes	The type of the picker
range	string[][] | number[][] | Object[][]	[]	Yes	Valid when the mode is selector or multiSelector.
rangeKey	string		No	Specifies the key value of the object as the content to be displayed on the picker when range is an object array.
value	string[] | number[] | Object[]	[]	Yes	Indicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChange	BaseEventOrigFunction<onChangeEventDetail>		Yes	A change event is triggered when value is changed. event.detail = {value}
onColumnChange	BaseEventOrigFunction<onColumnChangeEvnetDetail>		No	Triggered when the column changes.

Property Support

Property	WeChat Mini-Program	H5	React Native
PickerMultiSelectorProps.range	✔️	✔️	✔️
PickerMultiSelectorProps.rangeKey	✔️	✔️	✔️
PickerMultiSelectorProps.value	✔️	✔️	✔️
PickerMultiSelectorProps.onChange	✔️	✔️	✔️
PickerMultiSelectorProps.onColumnChange	✔️	✔️	✔️

onChangeEventDetail

Param	Type	Description
value	number[]	Indicates the subscript of the changed value

onColumnChangeEvnetDetail

Param	Type	Description
column	number	Indicates which column was changed (subscripts start from 0)
value	number	Indicates the subscript of the changed value

PickerTimeProps

Time picker: mode = time

Property	Type	Required	Description
mode	"time"	Yes	The type of the picker
value	string	Yes	The selected time, in the form of "hh:mm".
start	string	No	The start of the valid time range, in the form of "hh:mm".
end	string	No	The end of the valid time range, in the form of "hh:mm".
onChange	BaseEventOrigFunction<onChangeEventDetail>	Yes	A change event triggered when the value is changed. event.detail = {value}

Property Support

Property	WeChat Mini-Program	H5	React Native
PickerTimeProps.value	✔️	✔️	✔️
PickerTimeProps.start	✔️	✔️	✔️
PickerTimeProps.end	✔️	✔️	✔️
PickerTimeProps.onChange	✔️	✔️	✔️

onChangeEventDetail

Param	Type	Description
value	string	Indicates the selected time

PickerDateProps

Date picker: mode = date

Property	Type	Default	Required	Description
mode	"date"		Yes	The type of the picker
value	string	0	Yes	The selected date, in the form of "YYYY-MM-DD".
start	string		No	The start of the valid date range, in the form of "YYYY-MM-DD".
end	string		No	The end of the valid date range, in the form of "YYYY-MM-DD".
fields	"year" | "month" | "day"	"day"	No	The granularity of the picker. Valid values include "year", "month", and "day".
onChange	BaseEventOrigFunction<onChangeEventDetail>		Yes	vA change event triggered when the value is changed. event.detail = {value}

Property Support

Property	WeChat Mini-Program	H5	React Native
PickerDateProps.value	✔️	✔️	✔️
PickerDateProps.start	✔️	✔️	✔️
PickerDateProps.end	✔️	✔️	✔️
PickerDateProps.fields	✔️	✔️	✔️
PickerDateProps.onChange	✔️	✔️	✔️

fields

Valid values of fields

Value	Description
year	The granularity of the picker is year.
month	The granularity of the picker is month.
day	The granularity of the picker is day.

onChangeEventDetail

Param	Type	Description
value	string	Indicates the selected date

PickerRegionProps

Province, city, and district picker: mode = region

Property	Type	Default	Required	Description
mode	"region"		Yes	The type of the picker
value	string[]	[]	Yes	The selected province, city, and district. The first value in each column is selected by default.
customItem	string		No	Specifies a custom item to be added to the top of each column.
onChange	BaseEventOrigFunction<onChangeEventDetail>		Yes	A change event triggered when the value is changed, event.detail = {value, code, postcode}. The code field refers to the statistical zoning code, and the postcode field refers to the post code.

Property Support

Property	WeChat Mini-Program	H5	React Native
PickerRegionProps.value	✔️	✔️	✔️
PickerRegionProps.customItem	✔️	✔️	✔️
PickerRegionProps.onChange	✔️	✔️	✔️

onChangeEventDetail

Property	Type	Required	Description
value	string[]	Yes	Indicates the selected province and city
code	string[]	Yes	Zone Codes for Statistics
postcode	string	No	Postal Code

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
Picker	✔️	✔️	✔️	✔️	✔️	✔️