1# picker-view 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 18 19| Name | Type | Default Value | Mandatory | Description | 20| ---- | ------ | ---- | ---- | ---------------------------------------- | 21| 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.| 22 23### Text Selector 24 25| Name | Type | Default Value | Mandatory | Description | 26| --------------- | ------ | ---- | ---- | ---------------------------------------- | 27| 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.| 28| selected | string | 0 | No | Default value of the text selector. The value is the index of **range**. | 29| indicatorprefix | string | - | No | Prefix field added when a value is specified for the text selector. | 30| indicatorsuffix | string | - | No | Suffix field added when a value is specified for the text selector. | 31 32### Time Selector 33 34| Name | Type | Default Value | Mandatory | Description | 35| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | 36| containsecond | boolean | false | No | Whether seconds are contained. | 37| 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.| 38| 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.| 39 40### Date Selector 41 42| Name | Type | Default Value | Mandatory | Description | 43| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | 44| start | <time> | 1970-1-1 | No | Start date of the date selector, in the format of YYYY-MM-DD. | 45| end | <time> | 2100-12-31 | No | End date of the date selector, in the format of YYYY-MM-DD. | 46| selected | string | Current date | No | Default value of the date selector, in the format of YYYY-MM-DD. | 47| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. | 48| 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.| 49 50### Date and Time Selector 51 52| Name | Type | Default Value | Mandatory | Description | 53| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | 54| 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.| 55| 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.| 56| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. | 57| 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.| 58 59### Multi-Column Text Selector 60 61| Name | Type | Default Value | Mandatory | Description | 62| -------- | ------- | --------- | ---- | ---------------------------------------- | 63| columns | number | - | Yes | Number of columns in the multi-column text selector. | 64| 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.| 65| 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.| 66 67 68## Styles 69 70In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 71 72| Name | Type | Default Value | Mandatory | Description | 73| -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | 74| color | <color> | \#ffffff | No | Font color of a candidate item. | 75| font-size | <length> | 16px | No | Font size of a candidate item. The value is of the length type, in pixels. | 76| selected-color | <color> | #ff0a69f7 | No | Font color of the selected item. | 77| selected-font-size | <length> | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | 78| 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. | 79| 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. | 80| 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](../arkui-js/js-components-common-customizing-font.md) is used for the text. | 81 82 83## Events 84 85The following events are supported. 86 87### Text Selector 88 89| Name | Parameter | Description | 90| ------ | ---------------------------------------- | --------------- | 91| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.| 92 93### Time Selector 94 95| Name | Parameter | Description | 96| ------ | ---------------------------------------- | ------------------------------- | 97| 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.| 98 99### Date Selector 100 101| Name | Parameter | Description | 102| ------ | ---------------------------------------- | --------------- | 103| change | { year:year, month:month, day:day } | Triggered when a value is specified for the date selector.| 104 105### Date and Time Selector 106 107| Name | Parameter | Description | 108| ------ | ---------------------------------------- | ----------------- | 109| change | { year:year, month:month, day:day, hour:hour, minute:minute } | Triggered when a value is specified for the date and time selector.| 110 111### Multi-Column Text Selector 112 113| Name | Parameter | Description | 114| ------------ | ---------------------------------------- | ---------------------------------------- | 115| 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.| 116 117 118## Methods 119 120Not supported 121 122 123## Example 1241. Text Selector 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 left: 0px; 142 top: 0px; 143 width: 454px; 144 height: 454px; 145 } 146 .title { 147 font-size: 30px; 148 text-align: center; 149 margin-top: 20px; 150 } 151 ``` 152 153 ```js 154 /* xxx.js */ 155 export default { 156 data: { 157 options: ['Option 1','Option 2','Option 3'], 158 value: "Option 1", 159 index: 0 160 }, 161 handleChange(data) { 162 this.value = data.newValue; 163 this.index = data.newSelected; 164 }, 165 } 166 ``` 167  168 1692. Time Selector 170 ```html 171 <!-- xxx.hml --> 172 <div class="container"> 173 <text class="title"> 174 Selected: {{time}} 175 </text> 176 <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> 177 </div> 178 ``` 179 180 ```css 181 /* xxx.css */ 182 .container { 183 flex-direction: column; 184 justify-content: center; 185 align-items: center; 186 left: 0px; 187 top: 0px; 188 width: 454px; 189 height: 454px; 190 } 191 .title { 192 font-size: 30px; 193 text-align: center; 194 } 195 .time-picker { 196 width: 500px; 197 height: 400px; 198 margin-top: 20px; 199 } 200 ``` 201 202 ```js 203 /* xxx.js */ 204 export default { 205 data: { 206 defaultTime: "", 207 time: "", 208 }, 209 onInit() { 210 this.defaultTime = this.now(); 211 }, 212 handleChange(data) { 213 this.time = this.concat(data.hour, data.minute); 214 }, 215 now() { 216 const date = new Date(); 217 const hours = date.getHours(); 218 const minutes = date.getMinutes(); 219 return this.concat(hours, minutes); 220 }, 221 fill(value) { 222 return (value > 9 ? "" : "0") + value; 223 }, 224 concat(hours, minutes) { 225 return `${this.fill(hours)}:${this.fill(minutes)}`; 226 }, 227 } 228 ``` 229 230  231 2323. Date Selector 233 ```html 234 <!-- xxx.hml --> 235 <div class="container"> 236 <text class="title"> 237 Selected: {{time}} 238 </text> 239 <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> 240 </div> 241 ``` 242 243 ```css 244 /* xxx.css */ 245 .container { 246 flex-direction: column; 247 justify-content: center; 248 align-items: center; 249 left: 0px; 250 top: 0px; 251 width: 454px; 252 height: 454px; 253 } 254 .title { 255 font-size: 30px; 256 text-align: center; 257 margin-top: 20px; 258 } 259 .date-picker { 260 width: 500px; 261 height: 400px; 262 margin-top: 50px; 263 } 264 ``` 265 266 ```js 267 /* xxx.js */ 268 export default { 269 data: { 270 date: "", 271 }, 272 handleChange(data) { 273 this.date = data.year + "" + data.month + "" + data.day + ""; 274 }, 275 } 276 ``` 277 278 2794. Date and Time Selector 280 ```html 281 <!-- xxx.hml --> 282 <div class="container"> 283 <text class="title"> 284 Selected: {{datetime}} 285 </text> 286 <picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view> 287 </div> 288 ``` 289 290 ```css 291 /* xxx.css */ 292 .container { 293 flex-direction: column; 294 justify-content: center; 295 align-items: center; 296 left: 0px; 297 top: 0px; 298 width: 500px; 299 height: 454px; 300 } 301 .title { 302 font-size: 30px; 303 text-align: center; 304 margin-top: 20px; 305 } 306 .date-picker { 307 width: 500px; 308 height: 400px; 309 margin-top: 50px; 310 } 311 ``` 312 313 ```js 314 /* xxx.js */ 315 export default { 316 data: { 317 datetime: "", 318 }, 319 handleChange(data) { 320 this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + ""; 321 }, 322 } 323 ``` 324 325 3265. Multi-Column Text Selector 327 328 ```html 329 <!-- xxx.hml --> 330 <div class="container"> 331 <text class="title"> 332 Selected: {{ value }} 333 </text> 334 <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view> 335 </div> 336 ``` 337 338 ```css 339 /* xxx.css */ 340 .container { 341 flex-direction: column; 342 justify-content: center; 343 align-items: center; 344 left: 0px; 345 top: 0px; 346 width: 500px; 347 height: 454px; 348 } 349 .title { 350 font-size: 30px; 351 text-align: center; 352 margin-top: 20px; 353 } 354 ``` 355 356 ```js 357 /* xxx.js */ 358 export default { 359 data: { 360 multitext: [ 361 [1, 2, 3], 362 [4, 5, 6], 363 [7, 8, 9], 364 ], 365 value: "" 366 }, 367 handleChange(data) { 368 this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected; 369 }, 370 } 371 ``` 372  373
