title: Picker
sidebar_label: Picker
The scroll picker that pops up from the lower part.
Reference
Type
ComponentType<PickerSelectorProps | PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps>
Examples
import Tabs from ‘@theme/Tabs’;
import TabItem from ‘@theme/TabItem’;
tsx
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>
)
}
}
html
<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 |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |
