HarmonyOS API：picker

joytrian

发布于 2023-3-28 21:04

浏览

0收藏

版本：v3.1 Beta

picker

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。

权限列表

无

子组件

不支持。

示例

div class="container">
    <text class="txt">选择器</text>

    <div class="out-container text-container">
        <text class="title">普通选择器</text>
        <picker class="text" focusable="true" type="text" value="{{pos}}" range="{{posarr}}" 
            onchange="setPos" oncancel="cancel"></picker>
    </div>

    <div class="out-container text-container">
        <text class="title">日期选择器</text>
        <picker class="date" type="date" value="{{datevalue}}" selected="{{dateselect}}" lunarswitch="true" 
            onchange="dateonchange" oncancel="cancel"></picker>
    </div>

    <div class="out-container">
        <text class="title">时间选择器</text>
        <picker class="datetime" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" 
            hours="{{hour}}" lunarswitch="true" onchange="datetimeonchange" oncancel="cancel"></picker>
    </div>

    <div class="date-container">
        <div class="out-container">
            <text class="title">起始日期</text>
            <picker type="date" class="pick" value="{{startdate}}"  selected="{{starSelected}}" 
                onchange="setStartDate" oncancel="cancel"></picker>
        </div>
        <div style="width: 8px;height: 2px; background-color: black; margin-left: 12%;"></div>
        <div class="out-container">
            <text class="title">终止日期</text>
            <picker id="endpick" type="date" class="pick" value="{{enddate}}" selected="{{endSelected}}" 
                onchange="setEndDate" oncancel="cancel"></picker>
        </div>
    </div>
    
    <div class="multi-container">
        <div class="out-container">
            <text class="title">多列文本选择器</text>
            <picker class="pickerLinkage" type="multi-text" value="{{curArea}}" oncolumnchange="updatePicker" 
                range="{{range.arr}}" selected="{{LinkageSelected}}" onchange="getArea" oncancel="cancel" 
                id="picker2"></picker>
        </div>
            </div>
</div>

HarmonyOS API：picker-鸿蒙开发者社区

属性

除支持通用属性外，还支持如下属性：

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

普通选择器

滑动选择器类型设置为text时表示普通选择器。

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

日期选择器

滑动选择器类型设置为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时，开关按钮处于被选中状态。

时间选择器

滑动选择器类型设置为time时表示时间选择器。

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

日期时间选择器

滑动选择器类型设置为datetime时表示日期时间选择器，日期的选择范围为本年的日月。

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

多列文本选择器

滑动选择器类型设置为multi-text时表示多列文本选择器。

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

样式

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
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>	-	否	选择器的选择项列表高度。

事件

除支持通用事件外，还支持如下事件：

普通选择器

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

日期选择器

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

方法

除支持通用方法外，支持如下方法：

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

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-basic-picker-0000001427584936-V3?catalogVersion=V3

分类

卡片开发

标签

HarmonyOS API

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：picker

picker

权限列表

子组件

示例

属性

普通选择器

日期选择器

时间选择器

日期时间选择器

多列文本选择器

样式

事件

普通选择器

日期选择器

日期时间选择器

时间选择器

多列文本选择器

方法

目录

订阅鸿蒙技术特刊，精选内容抢先看