# picker 滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 ## 权限列表无 ## 子组件不支持。 ## 属性除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵

名称	类型	默认值	必填	描述
type	string	-	否	该属性值不支持动态修改。可选择项有： text：文本选择器。 date：日期选择器。 time：时间选择器。 datetime：日期时间选择器。 multi-text：多列文本选择器。

名称

类型

默认值

必填

描述

type

string

否

该属性值不支持动态修改。可选择项有：

text：文本选择器。
date：日期选择器。
time：时间选择器。
datetime：日期时间选择器。
multi-text：多列文本选择器。

普通选择器：type=text

名称	类型	默认值	必填	描述
range	Array	-	否	设置普通选择器的取值范围，如["15", "20", "25"]。说明：使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。
selected	string	0	否	设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗时弹窗界面的默认选择值。
value	string	-	否	设置普通选择器的值。

日期选择器：type=date

名称	类型	默认值	必填	描述
start	<time>	1970-1-1	否	设置日期选择器的起始时间，格式为 YYYY-MM-DD。
end	<time>	2100-12-31	否	设置日期选择器的结束时间，格式为 YYYY-MM-DD。
selected	string	当前日期	否	设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗时弹窗界面的默认选择值。
value	string	-	是	设置日期选择器的值。
lunar⁵⁺	boolean	false	否	设置日期选择器弹窗界面是否为农历展示。
lunarswitch	boolean	false	否	设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。说明：仅手机和平板设备支持。当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。

时间选择器：type=time

名称	类型	默认值	必填	描述
containsecond	boolean	false	否	设置时间选择器是否包含秒。
selected	string	当前时间	否	设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，该取值表示选择器弹窗时弹窗界面的默认选择值。
value	string	-	否	设置时间选择器的值。
hours	number	24^1-4 -⁵⁺	否	设置时间选择器采用的时间格式，可选值： 12：按照12小时制显示，用上午和下午进行区分； 24：按照24小时制显示。说明：默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。⁵⁺

日期时间选择器：type=datetime，日期的选择范围为本年的日月。

名称	类型	默认值	必填	描述
selected	string	当前日期时间	否	设置日期时间选择器弹窗的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。
value	string	-	是	设置日期时间选择器的值。
hours	number	24^1-4 -⁵⁺	否	设置日期时间选择器采用的时间格式，可选值： 12：按照12小时制显示，用上午和下午进行区分； 24：按照24小时制显示。说明：默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。⁵⁺
lunar⁵⁺	boolean	false	否	设置日期时间选择器弹窗界面是否为农历展示。
lunarswitch	boolean	false	否	设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。说明：仅手机和平板设备支持。当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。

多列文本选择器：type=multi-text

名称	类型	默认值	必填	描述
columns	number	-	是	设置多列文本选择器的列数。
range	二维Array	-	否	设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。说明：使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。
selected	Array	[0,0,0,…]	否	设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。
value	Array	-	否	设置多列文本选择器的值，每一列被选中项对应的值构成的数组。

## 样式除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：

名称	类型	默认值	必填	描述
text-color	<color>	-	否	选择器的文本颜色。
font-size	<length>	-	否	选择器的文本尺寸。
allow-scale	boolean	true	否	选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。说明：如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
letter-spacing	<length>	0	否	选择器的字符间距。见text组件的letter-spacing样式属性。
text-decoration	string	-	否	选择器的文本修饰。见text组件的text-decoration样式属性。
font-style	string	normal	否	选择器的字体样式。见text组件的font-style样式属性。
font-weight	number \| string	normal	否	选择器的字体粗细。见text组件的font-weight样式属性。
font-family	string	sans-serif	否	选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。
line-height	<length>	0px	否	选择器的文本行高。
column-height⁵⁺	<length>	-	否	选择器的选择项列表高度。说明：仅手机和平板设备支持。

## 事件除支持[通用事件](js-components-common-events.md)外，还支持如下事件：普通选择器：

名称	参数	描述
change	{ newValue:newValue, newSelected:newSelected }	普通选择器选择值后点击弹窗中的确定按钮时触发该事件（newSelected为索引）。
cancel	-	用户点击弹窗中的取消按钮时触发该事件。

日期选择器：

名称	参数	描述
change	{ year:year, month:month, day:day }	日期选择器选择值后点击弹窗中的确认按钮时触发该事件。说明： month值范围为： 0（1月）~11（12月）。⁵⁺
cancel	-	用户点击弹窗中的取消按钮时触发该事件。

日期时间选择器：

名称	参数	描述
change	{ year:year, month:month, day:day, hour:hour, minute:minute}	日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。
cancel	-	用户点击弹窗中的取消按钮时触发该事件。

时间选择器：

名称	参数	描述
change	{ hour:hour, minute:minute, [second:second] }	时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。
cancel	-	用户点击弹窗中的取消按钮时触发该事件。

名称

参数

描述

change

{ hour:hour, minute:minute,

[second:second] }

时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。

cancel

用户点击弹窗中的取消按钮时触发该事件。

多列文本选择器：

名称	参数	描述
change	{ newValue:[newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }	多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中： newValue：被选中项对应的值构成的数组。 newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。
columnchange	{ column:column, newValue:newValue, newSelected:newSelected }	多列文本选择器中某一列的值改变时触发该事件，其中： column：第几列修改。 newValue：选中的值。 newSelected：选中值对应的索引。
cancel	-	用户点击弹窗中的取消按钮时触发该事件。

名称

参数

描述

change

{ newValue:[newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }

多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中：

newValue：被选中项对应的值构成的数组。
newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。

columnchange

{ column:column, newValue:newValue, newSelected:newSelected }

多列文本选择器中某一列的值改变时触发该事件，其中：

column：第几列修改。
newValue：选中的值。
newSelected：选中值对应的索引。

cancel

用户点击弹窗中的取消按钮时触发该事件。

## 方法除支持[通用方法](js-components-common-methods.md)外，支持如下方法：

名称	参数	描述
show	-	显示 picker。

## 示例 ```

``` ``` /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; } .pickertext{ background-color: red; width: 300; height: 400; } .pickerdate{ background-color: #BEFF5B; width: 200; height: 200; } .pickertime{ background-color: #B764FF; width: 500; height: 200; } .pickerdatetime{ background-color: #FF6387; width: 100%; height: 300; } .pickermuitl{ background-color: #71FF31; } ``` ``` // xxx.js import router from '@system.router'; import prompt from '@system.prompt'; export default { data: { rangetext:['15', "20", "25"], multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], textvalue:'default textvalue', datevalue:'default datevalue', timevalue:'default timevalue', datetimevalue:'default datetimevalue', multitextvalue:'default multitextvalue', containsecond:true, multitextselect:[1,2,0], datetimeselect:'2012-5-6-11-25', timeselect:'11:22:30', dateselect:'2021-3-2', textselect:'2' }, textonchange(e) { this.textvalue = e.newValue; prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) }, textoncancel(e) { prompt.showToast({ message:"text: textoncancel" }) }, dateonchange(e) { this.datevalue = e.year + "-" + e.month + "-" + e.day; prompt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) }, dateoncancel() { prompt.showToast({ message:"date: dateoncancel" }) }, timeonchange(e) { if(this.containsecond){ this.timevalue=e.hour+":"+e.minute+":"+e.second; prompt.showToast({ message:"时间:" + e.hour + ":" + e.minute + ":" + e.second }) } else { this.timevalue=e.hour+":"+e.minute; prompt.showToast({ message:"时间:" + e.hour + ":" + e.minute }) }}, timeoncancel() { prompt.showToast({ message:"timeoncancel" }) }, datetimeonchange(e) { this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; prompt.showToast({ message:"时间:"+e.month+"-"+e.day+" "+e.hour+":"+e.minute }) }, datetimeoncancel() { prompt.showToast({ message:"datetimeoncancel" }) }, multitextonchange(e) { this.multitextvalue=e.newValue; prompt.showToast({ message:"多列文本更改" + e.newValue }) }, multitextoncancel() { prompt.showToast({ message:"multitextoncancel" }) }, popup_picker() { this.$element("picker_text").show(); }, } ``` **图 1** text ![](figures/text.png "text") **图 2** date ![](figures/date33.png) **图 3** time ![](figures/time.png "time") **图 4** datetime ![](figures/datetime.png "datetime") **图 5** multitext ![](figures/multitext.png "multitext")