Skip to main content
Version: Next

Picker

The scroll picker that pops up from the lower part.

Reference

Type

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

Examples

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>
)
}
}

PickerStandardProps

Selector General Parameters

PropertyTypeDefaultRequiredDescription
mode"selector" | "multiSelector" | "time" | "date" | "region""selector"YesThe type of the picker
disabledbooleanfalseNoSpecifies whether to disable the component.
onCancelBaseEventOrigFunction<any>NoTriggered when selection is canceled

Property Support

PropertyWeChat Mini-ProgramH5React Native
PickerStandardProps.mode✔️✔️✔️
PickerStandardProps.disabled✔️✔️✔️
PickerStandardProps.onCancel✔️✔️✔️

mode

Valid values of mode

ValueDescription
selectorCommon picker
multiSelectorMulti-column picker
timeTime picker
dateDate picker
regionProvince, city, and district picker

PickerSelectorProps

Common picker: mode = selector

PropertyTypeDefaultRequiredDescription
mode"selector"YesThe type of the picker
rangestring[] | number[] | Object[][]YesValid when the mode is selector or multiSelector.
rangeKeystringNoSpecifies the key value of the object as the content to be displayed on the picker when range is an object array.
valuenumber0YesIndicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChangeBaseEventOrigFunction<onChangeEventDetail>YesA change event is triggered when value is changed. event.detail = {value}

Property Support

PropertyWeChat Mini-ProgramH5React Native
PickerSelectorProps.range✔️✔️✔️
PickerSelectorProps.rangeKey✔️✔️✔️
PickerSelectorProps.value✔️✔️✔️
PickerSelectorProps.onChange✔️✔️✔️

onChangeEventDetail

ParamTypeDescription
valuestring | numberIndicates the subscript of the changed value

PickerMultiSelectorProps

Multi-column picker: mode = multiSelector

PropertyTypeDefaultRequiredDescription
mode"multiSelector"YesThe type of the picker
rangestring[][] | number[][] | Object[][][]YesValid when the mode is selector or multiSelector.
rangeKeystringNoSpecifies the key value of the object as the content to be displayed on the picker when range is an object array.
valuestring[] | number[] | Object[][]YesIndicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChangeBaseEventOrigFunction<onChangeEventDetail>YesA change event is triggered when value is changed. event.detail = {value}
onColumnChangeBaseEventOrigFunction<onColumnChangeEvnetDetail>NoTriggered when the column changes.

Property Support

PropertyWeChat Mini-ProgramH5React Native
PickerMultiSelectorProps.range✔️✔️✔️
PickerMultiSelectorProps.rangeKey✔️✔️✔️
PickerMultiSelectorProps.value✔️✔️✔️
PickerMultiSelectorProps.onChange✔️✔️✔️
PickerMultiSelectorProps.onColumnChange✔️✔️✔️

onChangeEventDetail

ParamTypeDescription
valuenumber[]Indicates the subscript of the changed value

onColumnChangeEvnetDetail

ParamTypeDescription
columnnumberIndicates which column was changed (subscripts start from 0)
valuenumberIndicates the subscript of the changed value

PickerTimeProps

Time picker: mode = time

PropertyTypeRequiredDescription
mode"time"YesThe type of the picker
valuestringYesThe selected time, in the form of "hh:mm".
startstringNoThe start of the valid time range, in the form of "hh:mm".
endstringNoThe end of the valid time range, in the form of "hh:mm".
onChangeBaseEventOrigFunction<onChangeEventDetail>YesA change event triggered when the value is changed. event.detail = {value}

Property Support

PropertyWeChat Mini-ProgramH5React Native
PickerTimeProps.value✔️✔️✔️
PickerTimeProps.start✔️✔️✔️
PickerTimeProps.end✔️✔️✔️
PickerTimeProps.onChange✔️✔️✔️

onChangeEventDetail

ParamTypeDescription
valuestringIndicates the selected time

PickerDateProps

Date picker: mode = date

PropertyTypeDefaultRequiredDescription
mode"date"YesThe type of the picker
valuestring0YesThe selected date, in the form of "YYYY-MM-DD".
startstringNoThe start of the valid date range, in the form of "YYYY-MM-DD".
endstringNoThe end of the valid date range, in the form of "YYYY-MM-DD".
fields"year" | "month" | "day""day"NoThe granularity of the picker. Valid values include "year", "month", and "day".
onChangeBaseEventOrigFunction<onChangeEventDetail>YesvA change event triggered when the value is changed. event.detail = {value}

Property Support

PropertyWeChat Mini-ProgramH5React Native
PickerDateProps.value✔️✔️✔️
PickerDateProps.start✔️✔️✔️
PickerDateProps.end✔️✔️✔️
PickerDateProps.fields✔️✔️✔️
PickerDateProps.onChange✔️✔️✔️

fields

Valid values of fields

ValueDescription
yearThe granularity of the picker is year.
monthThe granularity of the picker is month.
dayThe granularity of the picker is day.

onChangeEventDetail

ParamTypeDescription
valuestringIndicates the selected date

PickerRegionProps

Province, city, and district picker: mode = region

PropertyTypeDefaultRequiredDescription
mode"region"YesThe type of the picker
valuestring[][]YesThe selected province, city, and district. The first value in each column is selected by default.
customItemstringNoSpecifies a custom item to be added to the top of each column.
onChangeBaseEventOrigFunction<onChangeEventDetail>YesA 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

PropertyWeChat Mini-ProgramH5React Native
PickerRegionProps.value✔️✔️✔️
PickerRegionProps.customItem✔️✔️✔️
PickerRegionProps.onChange✔️✔️✔️

onChangeEventDetail

PropertyTypeRequiredDescription
valuestring[]YesIndicates the selected province and city
codestring[]YesZone Codes for Statistics
postcodestringNoPostal Code

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Picker✔️✔️✔️✔️✔️✔️