1# picker 2 3> **说明：** 4> 5> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 6 7滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 8 9 10## 权限列表 11 12无 13 14 15## 子组件 16 17不支持。 18 19 20## 属性 21 22除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵ 23 24| 名称 | 类型 | 默认值 | 必填 | 描述 | 25| ---- | ------ | ---- | ---- | ---------------------------------------- | 26| type | string | - | 否 | 该属性值不支持动态修改。可选择项有：<br/>- text：文本选择器。<br/>- date：日期选择器。<br/>- time：时间选择器。<br/>- datetime：日期时间选择器。<br/>- multi-text：多列文本选择器。 | 27 28 29### 普通选择器 30 31滑动选择器类型设置为text时表示普通选择器。 32 33| 名称 | 类型 | 默认值 | 必填 | 描述 | 34| -------- | ------ | ---- | ---- | ---------------------------------------- | 35| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。<br/>使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | 36| selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗界面的默认选择值。 | 37| value | string | - | 否 | 设置普通选择器的值。 | 38 39 40### 日期选择器 41 42滑动选择器类型设置为date时表示日期选择器。 43 44| 名称 | 类型 | 默认值 | 必填 | 描述 | 45| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | 46| start | <time> | 1970-1-1 | 否 | 设置日期选择器的起始时间，格式为 YYYY-MM-DD。 | 47| end | <time> | 2100-12-31 | 否 | 设置日期选择器的结束时间，格式为 YYYY-MM-DD。 | 48| selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 | 49| value | string | - | 是 | 设置日期选择器的值。 | 50| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | 51| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | 52 53 54### 时间选择器 55 56滑动选择器类型设置为time时表示时间选择器。 57 58| 名称 | 类型 | 默认值 | 必填 | 描述 | 59| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | 60| containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 | 61| selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，<br/>该取值表示选择器弹窗界面的默认选择值。 | 62| value | string | - | 否 | 设置时间选择器的值。 | 63| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>- 12：按照12小时制显示，用上午和下午进行区分；<br/>- 24：按照24小时制显示。<br/>默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | 64 65 66### 日期时间选择器 67 68滑动选择器类型设置为datetime时表示日期时间选择器，日期的选择范围为本年的日月。 69 70| 名称 | 类型 | 默认值 | 必填 | 描述 | 71| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | 72| selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。<br/>- 月日时分：MM-DD-HH-mm<br/>- 年月日时分：YYYY-MM-DD-HH-mm<br/>不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 | 73| value | string | - | 是 | 设置日期时间选择器的值。 | 74| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>- 12：按照12小时制显示，用上午和下午进行区分；<br/>- 24：按照24小时制显示。<br/>默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup>lunar<sup>5+</sup>booleanfalse否设置日期时间选择器弹窗界面是否为农历展示。lunarswitchbooleanfalse否设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>说明：<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | 75| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | 76| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>  **说明：**<br/>> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | 77 78 79### 多列文本选择器 80 81滑动选择器类型设置为multi-text时表示多列文本选择器。 82 83| 名称 | 类型 | 默认值 | 必填 | 描述 | 84| -------- | ------- | --------- | ---- | ---------------------------------------- | 85| columns | number | - | 是 | 设置多列文本选择器的列数。 | 86| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。<br/>使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。selectedArray[0,0,0,…]否设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。valueArray-否设置多列文本选择器的值，每一列被选中项对应的值构成的数组。使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。 | 87| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 | 88| value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 | 89 90 91## 样式 92 93除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 94 95| 名称 | 类型 | 默认值 | 必填 | 描述 | 96| -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | 97| text-color | <color> | - | 否 | 选择器的文本颜色。 | 98| font-size | <length> | - | 否 | 选择器的文本尺寸。 | 99| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 100| letter-spacing | <length> | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 | 101| text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | 102| font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 | 103| font-weight | number \| string | normal | 否 | 选择器的字体粗细。见[text组件的font-weight样式属性](../arkui-js/js-components-basic-text.md#样式)。 | 104| font-family | string | sans-serif | 否 | 选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 105| line-height | <length> | 0px | 否 | 选择器的文本行高。 | 106| column-height<sup>5+</sup> | <length> | - | 否 | 选择器的选择项列表高度。 | 107 108 109## 事件 110 111除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 112 113 114### 普通选择器 115 116| 名称 | 参数 | 描述 | 117| ------ | ---------------------------------------- | ---------------------------------------- | 118| change | { newValue: newValue, newSelected: newSelected } | 普通选择器选择值后点击弹窗中的确定按钮时触发该事件（newSelected为索引）。 | 119| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | 120 121 122### 日期选择器 123 124| 名称 | 参数 | 描述 | 125| ------ | ---------------------------------------- | ---------------------------------------- | 126| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>month值范围为： 0（1月）~11（12月）。<sup>5+</sup> | 127| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | 128 129 130### 日期时间选择器 131 132| 名称 | 参数 | 描述 | 133| ------ | ---------------------------------------- | ---------------------------- | 134| change | { year: year, month: month, day: day, hour: hour, minute: minute} | 日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。 | 135| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | 136 137 138### 时间选择器 139 140| 名称 | 参数 | 描述 | 141| ------ | ---------------------------------------- | ---------------------------------------- | 142| change | { hour: hour, minute: minute, [second: second] } | 时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。 | 143| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | 144 145 146### 多列文本选择器 147 148| 名称 | 参数 | 描述 | 149| ------------ | ---------------------------------------- | ---------------------------------------- | 150| change | { newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] } | 多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中：<br/>- newValue：被选中项对应的值构成的数组。<br/>- newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。 | 151| columnchange | { column: column, newValue: newValue, newSelected: newSelected } | 多列文本选择器中某一列的值改变时触发该事件，其中：<br/>- column：第几列修改。<br/>- newValue：选中的值。<br/>- newSelected：选中值对应的索引。 | 152| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | 153 154 155## 方法 156 157除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法： 158 159| 名称 | 参数 | 描述 | 160| ---- | ---- | --------------- | 161| show | - | 显示 picker。 | 162 163 164## 示例 165 166```html 167<!-- xxx.hml --> 168<div class="container"> 169 <select @change="selectChange"> 170 <option value="{{ item }}" for="item in selectList"> 171 {{ item }} 172 </option> 173 </select> 174 <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}" 175 onchange="textonchange" 176 oncancel="textoncancel" class="pickertext" show="false"></picker> 177 178 <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}" 179 lunarswitch="true" 180 onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> 181 182 <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}" 183 selected="{{ timeselect }}" hours="12" 184 onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker> 185 186 <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24" 187 lunarswitch="true" 188 onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker> 189 190 <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}" 191 selected="{{ multitextselect }}" 192 onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> 193</div> 194``` 195 196```css 197/* xxx.css */ 198.container { 199 flex-direction: column; 200 justify-content: center; 201 align-items: center; 202} 203 204picker { 205 width: 60%; 206 height: 80px; 207 border-radius: 20px; 208 text-color: white; 209 font-size: 15px; 210 background-color: #4747e3; 211 margin-left: 20%; 212} 213 214select { 215 background-color: #efecec; 216 height: 50px; 217 width: 60%; 218 margin-left: 20%; 219 margin-top: 300px; 220 margin-bottom: 50px; 221 font-size: 22px; 222} 223``` 224 225```js 226// xxx.js 227import router from '@system.router'; 228import prompt from '@system.prompt'; 229 230export default { 231 data: { 232 selectList: ["text", "data", "time", "datetime", "multitext"], 233 rangetext: ['15', "20", "25"], 234 multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], 235 textvalue: 'default textvalue', 236 datevalue: 'default datevalue', 237 timevalue: 'default timevalue', 238 datetimevalue: 'default datetimevalue', 239 multitextvalue: 'default multitextvalue', 240 containsecond: true, 241 multitextselect: [1, 2, 0], 242 datetimeselect: '2012-5-6-11-25', 243 timeselect: '11:22:30', 244 dateselect: '2021-3-2', 245 textselect: '2' 246 }, 247 selectChange(e) { 248 for (let i = 0;i < this.selectList.length; i++) { 249 if (e.newValue == this.selectList[i]) { 250 this.$element("picker" + i).show(); 251 } 252 } 253 }, 254 textonchange(e) { 255 this.textvalue = e.newValue; 256 prompt.showToast({ 257 message: "text:" + e.newValue + ",newSelected:" + e.newSelected 258 }) 259 }, 260 textoncancel(e) { 261 prompt.showToast({ 262 message: "text: textoncancel" 263 }) 264 }, 265 dateonchange(e) { 266 this.datevalue = e.year + "-" + e.month + "-" + e.day; 267 prompt.showToast({ 268 message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day 269 }) 270 }, 271 dateoncancel() { 272 prompt.showToast({ 273 message: "date: dateoncancel" 274 }) 275 }, 276 timeonchange(e) { 277 if (this.containsecond) { 278 this.timevalue = e.hour + ":" + e.minute + ":" + e.second; 279 prompt.showToast({ 280 message: "Time:" + e.hour + ":" + e.minute + ":" + e.second 281 }) 282 } else { 283 this.timevalue = e.hour + ":" + e.minute; 284 prompt.showToast({ 285 message: "Time:" + e.hour + ":" + e.minute 286 }) 287 } 288 }, 289 timeoncancel() { 290 prompt.showToast({ 291 message: "timeoncancel" 292 }) 293 }, 294 datetimeonchange(e) { 295 this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute; 296 prompt.showToast({ 297 message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute 298 }) 299 }, 300 datetimeoncancel() { 301 prompt.showToast({ 302 message: "datetimeoncancel" 303 }) 304 }, 305 multitextonchange(e) { 306 this.multitextvalue = e.newValue; 307 prompt.showToast({ 308 message: "Multi-column text change" + e.newValue 309 }) 310 }, 311 multitextoncancel() { 312 prompt.showToast({ 313 message: "multitextoncancel" 314 }) 315 }, 316 popup_picker() { 317 this.$element("picker_text").show(); 318 }, 319} 320``` 321 322 323
