1# picker-view 2 3> **NOTE** 4> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 5 6The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen. 7 8 9## Child Components 10 11Not supported 12 13 14## Attributes 15 16In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 17 18| Name | Type | Default Value | Mandatory | Description | 19| ---- | ------ | ---- | ---- | ---------------------------------------- | 20| type | string | text | No | Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:<br>- **text**: text selector.<br>- **time**: time selector.<br>- **date**: date selector.<br>- **datetime**: date and time selector.<br>- **multi-text**: multi-column text selector.| 21 22### Text Selector 23 24| Name | Type | Default Value | Mandatory | Description | 25| --------------- | ------ | ---- | ---- | ---------------------------------------- | 26| range | Array | - | No | Value range of the text selector.<br>Use the data binding mode, for example, `range = {{data}}`. Declare the corresponding variable `data: ["15", "20", "25"]` in JavaScript.| 27| selected | string | 0 | No | Default value of the text selector. The value is the index of **range**. | 28| indicatorprefix | string | - | No | Prefix field added when a value is specified for the text selector. | 29| indicatorsuffix | string | - | No | Suffix field added when a value is specified for the text selector. | 30 31### Time Selector 32 33| Name | Type | Default Value | Mandatory | Description | 34| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | 35| containsecond | boolean | false | No | Whether seconds are contained. | 36| selected | string | Current time | No | Default value of the time selector, in the format of HH:mm.<br>If seconds are contained, the format is HH:mm:ss.| 37| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.| 38 39### Date Selector 40 41| Name | Type | Default Value | Mandatory | Description | 42| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | 43| start | <time> | 1970-1-1 | No | Start date of the date selector, in the format of YYYY-MM-DD. | 44| end | <time> | 2100-12-31 | No | End date of the date selector, in the format of YYYY-MM-DD. | 45| selected | string | Current date | No | Default value of the date selector, in the format of YYYY-MM-DD. | 46| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. | 47| lunarswitch | boolean | false | No | Whether to display the lunar calendar switch in the date selector. When this switch is displayed, the user can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar.| 48 49### Date and Time Selector 50 51| Name | Type | Default Value | Mandatory | Description | 52| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | 53| selected | string | Current date and time | No | Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.| 54| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the date and time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.| 55| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. | 56| lunarswitch | boolean | false | No | Whether to display the lunar calendar switch in the date and time selector. When this switch is displayed, the user can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar.| 57 58### Multi-Column Text Selector 59 60| Name | Type | Default Value | Mandatory | Description | 61| -------- | ------- | --------- | ---- | ---------------------------------------- | 62| columns | number | - | Yes | Number of columns in the multi-column text selector. | 63| range | Two-dimensional array| - | No | Items of the multi-column text selector. The value is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, **[["a", "b"], ["c", "d"]]**.<br>Use the data binding mode, for example, `range = {{data}}`. Declare the corresponding variable `data: ["15", "20", "25"]` in JavaScript.| 64| selected | Array | [0,0,0,…]| No | Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.| 65 66 67## Styles 68 69In addition to the [universal styles](js-components-common-styles.md), the following styles are supported. 70 71| Name | Type | Default Value | Mandatory | Description | 72| -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | 73| color | <color> | \#ffffff | No | Font color of a candidate item. | 74| font-size | <length> | 16px | No | Font size of a candidate item. The value is of the length type, in pixels. | 75| selected-color | <color> | #ff0a69f7 | No | Font color of the selected item. | 76| selected-font-size | <length> | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | 77| disappear-color<sup>5+</sup> | <color> | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | 78| disappear-font-size<sup>5+</sup> | <length> | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | 79| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.| 80 81 82## Events 83 84The following events are supported. 85 86### Text Selector 87 88| Name | Parameter | Description | 89| ------ | ---------------------------------------- | --------------- | 90| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.| 91 92### Time Selector 93 94| Name | Parameter | Description | 95| ------ | ---------------------------------------- | ------------------------------- | 96| change | { hour: hour, minute: minute, [second:second]} | Triggered when a value is specified for the time selector.<br>If seconds are contained, the value contains hour, minute, and second.| 97 98### Date Selector 99 100| Name | Parameter | Description | 101| ------ | ---------------------------------------- | --------------- | 102| change | { year:year, month:month, day:day } | Triggered when a value is specified for the date selector.| 103 104### Date and Time Selector 105 106| Name | Parameter | Description | 107| ------ | ---------------------------------------- | ----------------- | 108| change | { year:year, month:month, day:day, hour:hour, minute:minute } | Triggered when a value is specified for the date and time selector.| 109 110### Multi-Column Text Selector 111 112| Name | Parameter | Description | 113| ------------ | ---------------------------------------- | ---------------------------------------- | 114| columnchange | { column:column, newValue:newValue, newSelected:newSelected } | Triggered when the value of a column in the multi-column selector changes. <br>**column**: column whose value has changed. <br>**newValue**: selected value. <br>**newSelected**: index of the selected value.| 115 116 117## Methods 118 119Not supported 120 121 122## Example 123### Text Selector 124 125```html 126<!-- xxx.hml --> 127<div class="container"> 128 <text class="title"> 129 Selected value: {{value}} Selected index: {{index}} 130 </text> 131 <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view> 132</div> 133``` 134 135```css 136/* xxx.css */ 137.container { 138 flex-direction: column; 139 justify-content: center; 140 align-items: center; 141 width: 100%; 142 height: 50%; 143} 144.title { 145 font-size: 30px; 146 text-align: center; 147 margin-top: 50%; 148} 149``` 150 151```js 152/* xxx.js */ 153export default { 154 data: { 155 options: ['Option 1','Option 2','Option 3'], 156 value: "Option 1", 157 index: 0 158 }, 159 handleChange(data) { 160 this.value = data.newValue; 161 this.index = data.newSelected; 162 }, 163} 164``` 165 166 167### Time Selector 168 169```html 170<!-- xxx.hml --> 171<div class="container"> 172 <text class="title"> 173 Selected: {{time}} 174 </text> 175 <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> 176</div> 177``` 178 179```css 180/* xxx.css */ 181.container { 182 flex-direction: column; 183 justify-content: center; 184 align-items: center; 185 width: 100%; 186 height: 50%; 187} 188.title { 189 font-size: 31px; 190 text-align: center; 191 margin-top: 50%; 192} 193``` 194 195```js 196/* xxx.js */ 197export default { 198 data: { 199 defaultTime: "", 200 time: "", 201 }, 202 onInit() { 203 this.defaultTime = this.now(); 204 }, 205 handleChange(data) { 206 this.time = this.concat(data.hour, data.minute); 207 }, 208 now() { 209 const date = new Date(); 210 const hours = date.getHours(); 211 const minutes = date.getMinutes(); 212 return this.concat(hours, minutes); 213 }, 214 fill(value) { 215 return (value > 9 ? "" : "0") + value; 216 }, 217 concat(hours, minutes) { 218 return `${this.fill(hours)}:${this.fill(minutes)}`; 219 }, 220} 221``` 222 223 224 225### Date Selector 226 227```html 228<!-- xxx.hml --> 229<div class="container"> 230 <text class="title"> 231 Selected: {{date}} 232 </text> 233 <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view> 234</div> 235``` 236 237```css 238/* xxx.css */ 239.container { 240 flex-direction: column; 241 justify-content: center; 242 align-items: center; 243 width: 100%; 244 height: 50%; 245} 246.title { 247 font-size: 31px; 248 text-align: center; 249 margin-top: 50%; 250} 251``` 252 253```js 254/* xxx.js */ 255export default { 256 data: { 257 date: "", 258 }, 259 handleChange(data) { 260 this.date = data.year + "/" + data.month + "/" + data.day + ""; 261 }, 262} 263``` 264 265 266### Date and Time Selector 267 268```html 269<!-- xxx.hml --> 270<div class="container"> 271 <text class="title"> 272 Selected: {{datetime}} 273 </text> 274 <picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view> 275</div> 276``` 277 278```css 279/* xxx.css */ 280.container { 281 flex-direction: column; 282 justify-content: center; 283 align-items: center; 284 width: 100%; 285 height: 50%; 286} 287.title { 288 font-size: 31px; 289 text-align: center; 290 margin-top: 50%; 291} 292``` 293 294```js 295/* xxx.js */ 296export default { 297 data: { 298 datetime: "", 299 }, 300 handleChange(data) { 301 this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + ""; 302 }, 303} 304``` 305 306 307### Multi-Column Text Selector 308 309```html 310<!-- xxx.hml --> 311<div class="container"> 312 <text class="title"> 313 Selected: {{ value }} 314 </text> 315 <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view> 316</div> 317``` 318 319```css 320/* xxx.css */ 321.container { 322 flex-direction: column; 323 justify-content: center; 324 align-items: center; 325 width: 100%; 326 height: 50%; 327} 328.title { 329 font-size: 31px; 330 text-align: center; 331 margin-top: 50%; 332} 333``` 334 335```js 336/* xxx.js */ 337export default { 338 data: { 339 multitext: [ 340 [1, 2, 3], 341 [4, 5, 6], 342 [7, 8, 9], 343 ], 344 value: "" 345 }, 346 handleChange(data) { 347 this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected; 348 }, 349} 350``` 351 352
