Name	Type	Default Value	Mandatory	Description
mode	string	selector	No	Picker type. selector: common picker multiSelector: multi-column picker time: time picker date: date picker region: region picker
disabled	boolean	false	No	Disabled or not.
bindcancel	eventhandle	-	No	Event handler triggered when the selection is canceled.

Property	Type	Default Value	Description
range	array/object array	[]	Value range. Valid when mode is set to selector or multiSelector.
range-key	string	-	Key in the object whose value is displayed in the picker. Valid when range is an object array.
value	number	0	Index of the selected item within the range. The index is zero-based.
bindchange	eventhandle	-	Event handler triggered when value changes, with event.detail = {value}.

[h2]Multi-Column Picker

mode = multiSelector: multi-column picker

Property	Type	Default Value	Description
range	array/object array	[]	Value range. Valid when mode is set to selector or multiSelector.
range-key	string	-	Key in the object whose value is displayed in the picker. Valid when range is an object array.
value	array	[]	Index of the selected item within the range. The index is zero-based.
bindchange	eventhandle	-	Event handler triggered when value changes, with event.detail = {value}.
bindcolumnchange	eventhandle	-	Event handler triggered when the column is changed.

[h2]Time Picker

mode = time: time picker

Property	Type	Default Value	Description
value	string	-	Selected time. Format: hh:mm.
start	string	-	Start time of the valid time range. Format: hh:mm.
end	string	-	End time of the valid time range. Format: hh:mm.
bindchange	eventhandle	-	Event handler triggered when value changes, with event.detail = {value}.

[h2]Date Picker

mode = date: date picker

Property	Type	Default Value	Description
value	string	Current day	Selected date. Format: YYYY-MM-DD.
start	string	-	Start date of the valid date range. Format: YYYY-MM-DD.
end	string	-	End date of the valid date range. Format: YYYY-MM-DD.
bindchange	eventhandle	-	Event handler triggered when value changes, with event.detail = {value}.

[h2]Province/City/District Picker

mode = region: province/city/district picker

Property	Type	Default Value	Description
value	array	[]	Selected province, city, and district. By default, the first value in each column is selected.
bindchange	eventhandle	-	Event handler triggered when value changes, with event.detail = {value, code,}, where code indicates the administrative region code.

Example

HXML file:

<view class="page-body">
  <view class="page-section">
    <view class="contentTitle">Pokémon picker</view>
    <view class="contentBody">
      <view class="contentKey">Current selection</view>
      <view class="contentVal">
        <picker
          bindchange="bindPickerChange"
          value="{{index}}"
          range="{{array}}">
          <view>{{array[index]}}</view>
        </picker>
      </view>
    </view>
    <view class="contentTitle">Time picker</view>
    <view class="contentBody">
      <view class="contentKey">Current selection</view>
      <view class="contentVal">
        <picker
          mode="time"
          value="{{time}}"
          start="09:01"
          end="21:01"
          bindchange="bindTimeChange">
          <view>{{time}}</view>
        </picker>
      </view>
    </view>
  </view>
</view>

JS file:

Page({
  data: {
    array: ['Pikachu', 'Charmander', 'Squirtle', 'Charmeleon'],
    index: 0,
    time: '12:01',
  },
  bindPickerChange(e) {
    console.log('The picker sends a selection change event. Carried value: ', e.detail.value);
    this.setData({
      index: e.detail.value,
    });
  },
  bindTimeChange(e) {
    this.setData({
      time: e.detail.value,
    });
  },
});

目录

picker

Properties

[h2]Common Picker

[h2]Multi-Column Picker

[h2]Time Picker

[h2]Date Picker

[h2]Province/City/District Picker

Example