# picker-view 嵌入页面的滑动选择器。 ## 子组件不支持。 ## 属性除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：

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

名称

类型

默认值

必填

描述

type

string

text

否

设置滑动选择器的类型，该属性不支持动态修改，可选项有：

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

文本选择器：type=text

名称	类型	默认值	必填	描述
range	Array	-	否	设置文本选择器的取值范围。说明：使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。
selected	string	0	否	设置文本选择器的默认选择值，该值需要为range的索引。
indicatorprefix	string	-	否	文本选择器选定值增加的前缀字段。
indicatorsuffix	string	-	否	文本选择器选定值增加的后缀字段。

时间选择器：type=time

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

名称

类型

默认值

必填

描述

containsecond

boolean

false

否

时间选择器是否包含秒。

selected

string

当前时间

否

设置时间选择器的默认取值，格式为 HH:mm；

当包含秒时，格式为HH:mm:ss。

hours

number

24^1-4

-⁵⁺

否

设置时间选择器采用的时间格式，可选值：

12：按照12小时制显示，用上午和下午进行区分；
24：按照24小时制显示。
说明：
默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。⁵⁺

日期选择器：type=date

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

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

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

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

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

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

名称	类型	默认值	必填	描述
color	<color>	#ffffff	否	候选项字体颜色。
font-size	<length>	16px	否	候选项字体尺寸，类型length，单位px。
selected-color	<color>	#ff0a69f7	否	选中项字体颜色。
selected-font-size	<length>	20px	否	选中项字体尺寸，类型length，单位px。
disappear-color⁵⁺	<color>	#ffffff	否	渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。说明：仅手机和平板设备支持。
disappear-font-size⁵⁺	<length>	14px	否	渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。说明：仅手机和平板设备支持。
font-family	string	sans-serif	否	选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

## 事件仅支持如下事件： type=text：

名称	参数	描述
change	{ newValue: newValue, newSelected: newSelected }	文本选择器选定值后触发该事件。

type=time：

名称	参数	描述
change	{ hour: hour, minute: minute, [second:second] }	时间选择器选定值后触发该事件。包含秒时，返回时分秒。

名称

参数

描述

change

{ hour: hour, minute: minute, [second:second] }

时间选择器选定值后触发该事件。

包含秒时，返回时分秒。

type=date：

名称	参数	描述
change	{ year:year, month:month, day:day }	日期选择器选择值后触发该事件。

type=datetime：

名称	参数	描述
change	{ year:year, month:month, day:day, hour:hour, minute:minute }	日期时间选择器选择值后触发该事件。

type=multi-text：

名称	参数	描述
columnchange	{ column:column, newValue:newValue, newSelected:newSelected }	多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。

## 方法不支持。 ## 示例 ```

Selected：{{time}}

``` ``` /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; left: 0px; top: 0px; width: 454px; height: 454px; } .title { font-size: 30px; text-align: center; } .time-picker { width: 500px; height: 400px; margin-top: 20px; } ``` ``` /* xxx.js */ export default { data: { defaultTime: "", time: "", }, onInit() { this.defaultTime = this.now(); }, handleChange(data) { this.time = this.concat(data.hour, data.minute); }, now() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); return this.concat(hours, minutes); }, fill(value) { return (value > 9 ? "" : "0") + value; }, concat(hours, minutes) { return `${this.fill(hours)}:${this.fill(minutes)}`; }, } ``` ![](figures/sssssss.png)