Picker
The scroll picker that pops up from the lower part.
Type
ComponentType<PickerSelectorProps | PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps>
Examples
- React
- Vue
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>
)
}
}
<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 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |