picker

Introduction

A scroll picker that pops up from the bottom.

Property Description

Property	Type	Default	Required	Description	Minimum Version
cancel-text	string	Cancel	No	Text for the cancel button of the picker	3.2.0
confirm-text	string	Confirm	No	Text for the confirm button of the picker	3.2.0
mode	string	selector	No	Picker type; valid values: selector, multiSelector, time, date	3.2.0
disabled	boolean	false	No	Whether the picker is disabled	3.2.0
bindcancel	eventhandle		No	Triggered when canceling the selection or clicking outside the picker	3.2.0
confirm-close	boolean	true	No	Whether the picker should close when the confirm button is clicked, default is to close	3.2.0
confirm-text-color	string	#0081FF	No	Color of the confirm button	3.2.0
cancel-text-color	string	#61656D	No	Color of the cancel button	3.2.0
title-color	string	#191f2b	No	Color of the title text	3.2.0
selected-text-color	string	#191f2b	No	Color of the selected item text	3.2.0

Valid Values for the "mode" Property

Value	Description	Minimum Version
selector	Normal selector	3.2.0
multiSelector	Multi-column selector	3.2.0
time	Time selector	3.3.0
date	Date selector	3.3.0

In addition to the common properties mentioned above, picker has different properties for different modes.

Normal Selector (mode = selector)

Property	Type	Default	Description	Minimum Version
range	array/object array	[]	The range is valid when the mode is selector or multiSelector	3.2.0
range-key	string		When range is an Object Array, this specifies the key in the Object to display as the selector content	3.2.0
value	number	0	Represents the index of the selected item in the range (starting from 0)	3.2.0
bindchange	eventhandle		Triggered when the value changes (when the confirm button is clicked), `event.detail = {value: value}`	3.2.0
header-text	string		Title of the picker	3.2.0

Multi-column Selector (mode = multiSelector)

Property	Type	Default	Description	Minimum Version
range	array/object array	[]	The range is valid when the mode is selector or multiSelector	3.2.0
range-key	string		When range is an Object Array, this specifies the key in the Object to display as the selector content	3.2.0
value	array	[]	Represents the index of the selected item in each column (starting from 0)	3.2.0
bindcolumnchange	eventhandle		Triggered when the value of a column changes, `event.detail = {column: column, value: value}`, where column is the column index (starting from 0) and value is the index of the changed value	3.2.0
header-text	string		Title of the picker	3.2.0

Time Selector (mode = time)

Property	Type	Description	Minimum Version
value	string	Represents the selected time in `hh:mm` format	3.3.0
start	string	Represents the start of the valid time range in `hh:mm` format	3.3.0
end	string	Represents the end of the valid time range in `hh:mm` format	3.3.0
bindchange	eventhandle	Triggered when the value changes (when the confirm button is clicked), `event.detail = {value: value}`	3.3.0

Date Selector (mode = date)

Property	Type	Default	Description	Minimum Version
value	string	Current date	Represents the selected date, default format is `DD/MM/YYYY`, Chinese and Arabic formats: `YYYY/MM/DD`	3.3.0
start	string		Represents the start of the valid date range, default string format is `DD/MM/YYYY`, Chinese and Arabic formats: `YYYY/MM/DD`	3.3.0
end	string		Represents the end of the valid date range, default string format is `DD/MM/YYYY`, Chinese and Arabic formats: `YYYY/MM/DD`	3.3.0
fields	string	day	Valid values are year, month, day, representing the granularity of the selector	3.3.0
bindchange	eventhandle		Triggered when the value changes (when the confirm button is clicked), `event.detail = {value: value}`	3.3.0

Valid Values for "fields":

Value	Description
year	Selector granularity is year
month	Selector granularity is month
day	Selector granularity is day

Sample Code

<view class="section">
  <view class="section__title">Normal Selector</view>
  <picker bindchange="bindPickerChange" :value="index" :range="array">
    <view class="picker"> Current Selection: {{array[index]}} </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">Multi-column Selector</view>
  <picker
    mode="multiSelector"
    bindchange="bindMultiPickerChange"
    bind

columnchange="bindMultiPickerColumnChange"
    :value="multiIndex"
    :range="multiArray"
  >
    <view class="picker">
      Current Selection: {{multiArray[0][multiIndex[0]]}}, {{multiArray[1][multiIndex[1]]}}, {{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">Time Selector</view>
  <picker
    mode="time"
    :value="time"
    start="09:01"
    end="21:01"
    bindchange="bindTimeChange"
  >
    <view class="picker"> Current Selection: {{time}} </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">Date Selector</view>
  <picker
    mode="date"
    :value="date"
    start="2015-09-01"
    end="2017-09-01"
    bindchange="bindDateChange"
  >
    <view class="picker"> Current Selection: {{date}} </view>
  </picker>
</view>

Page({
  data: {
    array: ["USA", "China", "Brazil", "Japan"],
    objectArray: [
      {
        id: 0,
        name: "USA",
      },
      {
        id: 1,
        name: "China",
      },
      {
        id: 2,
        name: "Brazil",
      },
      {
        id: 3,
        name: "Japan",
      },
    ],
    index: 0,
    multiArray: [
      ["Invertebrate", "Vertebrate"],
      ["Flatworm", "Roundworm", "Annelid", "Mollusk", "Arthropod"],
      ["Tapeworm", "Leech"],
    ],
    objectMultiArray: [
      [
        {
          id: 0,
          name: "Invertebrate",
        },
        {
          id: 1,
          name: "Vertebrate",
        },
      ],
      [
        {
          id: 0,
          name: "Flatworm",
        },
        {
          id: 1,
          name: "Roundworm",
        },
        {
          id: 2,
          name: "Annelid",
        },
        {
          id: 3,
          name: "Mollusk",
        },
        {
          id: 3,
          name: "Arthropod",
        },
      ],
      [
        {
          id: 0,
          name: "Tapeworm",
        },
        {
          id: 1,
          name: "Leech",
        },
      ],
    ],
    multiIndex: [0, 0, 0],
    date: "2016-09-01",
    time: "12:01",
  },
  bindPickerChange: function (e) {
    console.log("Picker sent selection change, value:", e.detail.value);
    this.setData({
      index: e.detail.value,
    });
  },
  bindMultiPickerChange: function (e) {
    console.log("Picker sent selection change, value:", e.detail.value);
    this.setData({
      multiIndex: e.detail.value,
    });
  },
  bindMultiPickerColumnChange: function (e) {
    console.log("Changed column:", e.detail.column, ", value:", e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex,
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = [
              "Flatworm",
              "Roundworm",
              "Annelid",
              "Mollusk",
              "Arthropod",
            ];
            data.multiArray[2] = ["Tapeworm", "Leech"];
            break;
          case 1:
            data.multiArray[1] = ["Fish", "Amphibian", "Reptile"];
            data.multiArray[2] = ["Carp", "Mackerel"];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ["Tapeworm", "Leech"];
                break;
              case 1:
                data.multiArray[2] = ["Ascaris"];
                break;
              case 2:
                data.multiArray[2] = ["Ant", "Leech"];
                break;
              case 3:
                data.multiArray[2] = ["Clam", "Snail", "Slug"];
                break;
              case 4:
                data.multiArray[2] = [
                  "Insect",
                  "Crustacean",
                  "Arachnid",
                  "Myriapod",
                ];
                break;
            }
            break;
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ["Carp", "Mackerel"];
                break;
              case 1:
                data.multiArray[2] = ["Frog", "Guppy"];
                break;
              case 2:
                data.multiArray[2] = ["Lizard", "Turtle", "Gecko"];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        break;
    }
    console.log(data.multiIndex);
    this.setData(data);
  },

  bindDateChange: function (e) {
    console.log("Picker sent selection change, value:", e.detail.value);
    this.setData({
      date: e.detail.value,
    });
  },
  bindTimeChange: function (e) {
    console.log("Picker sent selection change, value:", e.detail.value);
    this.setData({
      time: e.detail.value,
    });
  },
});

picker

Introduction​

Property Description​

Valid Values for the "mode" Property​

In addition to the common properties mentioned above, picker has different properties for different modes.​

Normal Selector (mode = selector)​

Multi-column Selector (mode = multiSelector)​

Time Selector (mode = time)​

Date Selector (mode = date)​

Valid Values for "fields":​

Sample Code​

Introduction

Property Description

Valid Values for the "mode" Property

In addition to the common properties mentioned above, picker has different properties for different modes.

Normal Selector (mode = selector)

Multi-column Selector (mode = multiSelector)

Time Selector (mode = time)

Date Selector (mode = date)

Valid Values for "fields":

Sample Code