3.10【HarmonyOS鸿蒙开发】组件DatePicker

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

DatePicker次要供用户抉择日期。

一、反对的XML属性

DatePicker的共有XML属性继承自：StackLayout

DatePicker的自有XML属性见下表：

属性名称中文形容取值取值阐明应用案例
date_order显示格局，年月日0示意日期以日-月-年的格局显示。ohos:date_order="0"
1示意日期以月-日-年的格局显示。
2示意日期以年-月-日的格局显示。
3示意日期以年-日-月的格局显示。
4示意日期以日-月的格局显示。
5示意日期以月-日的格局显示。
6示意日期以年-月的格局显示。
7示意日期以月-年的格局显示。
8示意只显示年份。
9示意只显示月份。
10示意只显示日期。
day_fixed日期是否固定boolean类型能够间接设置true/false，也能够援用boolean资源。ohos:day_fixed="true"ohos:day_fixed="$boolean:true"
month_fixed月份是否固定boolean类型能够间接设置true/false，也能够援用boolean资源。ohos:month_fixed="true"ohos:month_fixed="$boolean:true"
year_fixed年份是否固定boolean类型能够间接设置true/false，也能够援用boolean资源。ohos:year_fixed="true"ohos:year_fixed="$boolean:true"
max_date最大日期long类型能够间接设置长整型值，也能够援用string资源。ohos:time="1234567"ohos:time="$string:date"
min_date最小日期long类型能够间接设置长整型值，也能够援用string资源。ohos:time="1234567"ohos:time="$string:date"
text_size文本大小float类型示意尺寸的float类型。能够是浮点数值，其默认单位为px；也能够是带px/vp/fp单位的浮点数值；也能够援用float资源。ohos:text_size="30"ohos:text_size="16fp"ohos:text_size="$float:size_value"
normal_text_size勾销选中文本的大小float类型示意尺寸的float类型。能够是浮点数值，其默认单位为px；也能够是带px/vp/fp单位的浮点数值；也能够援用float资源。ohos:normal_text_size="30"ohos:normal_text_size="16fp"ohos:normal_text_size="$float:size_value"
selected_text_size选中文本的大小float类型示意尺寸的float类型。能够是浮点数值，其默认单位为px；也能够是带px/vp/fp单位的浮点数值；也能够援用float资源。ohos:selected_text_size="30"ohos:selected_text_size="16fp"ohos:selected_text_size="$float:size_value"
normal_text_color勾销选中文本的色彩color类型能够间接设置色值，也能够援用color资源。ohos:normal_text_color="#A8FFFFFF"ohos:normal_text_color="$color:black"
selected_text_color选中文本的色彩color类型能够间接设置色值，也能够援用color资源。ohos:selected_text_color="#A8FFFFFF"ohos:selected_text_color="$color:black"
operated_text_color操作项的文本色彩color类型能够间接设置色值，也能够援用color资源。ohos:operated_text_color="#A8FFFFFF"ohos:operated_text_color="$color:black"
selected_normal_text_margin_ratio已选文本边距与失常文本边距的比例float类型能够间接设置浮点数值，也能够援用float浮点数资源。取值需>0.0f，默认值为1.0f。ohos:selected_normal_text_margin_ratio="0.5"ohos:selected_normal_text_margin_ratio="$float:ratio"
selector_item_num显示的项数integer类型能够间接设置整型数值，也能够援用integer资源。ohos:selector_item_num="10"ohos:selector_item_num="$integer:num"
shader_color着色器色彩color类型能够间接设置色值，也能够援用color资源。ohos:shader_color="#A8FFFFFF"ohos:shader_color="$color:black"
top_line_element选中项的顶行Element类型可间接配置色值，也可援用color资源或援用media/graphic下的图片资源。ohos:top_line_element="#FFFFFFFF"ohos:top_line_element="$color:black"ohos:top_line_element="$media:media_src"ohos:top_line_element="$graphic:graphic_src"
bottom_line_element选中项的底线Element类型可间接配置色值，也可援用color资源或援用media/graphic下的图片资源。ohos:bottom_line_element="#FFFFFFFF"ohos:bottom_line_element="$color:black"ohos:bottom_line_element="$media:media_src"ohos:bottom_line_element="$graphic:graphic_src"
wheel_mode_enabled抉择轮是否绕行boolean类型能够间接设置true/false，也能够援用boolean资源。ohos:wheel_mode_enabled="true"ohos:wheel_mode_enabled="$boolean:true"

二、应用DatePicker

1、在XML中创立DatePicker

<DatePicker        ohos:id="$+id:date_pick"        ohos:height="match_content"        ohos:width="300vp"        ohos:background_element="#22AA0000"        >

创立默认的DatePicker：

2、获取以后抉择日期，日/月/年，DatePicker默认抉择以后日期。

                // 获取DatePicker实例        DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);        int day = datePicker.getDayOfMonth();        int month = datePicker.getMonth();        int year = datePicker.getYear();                System.out.println("day:"+day+",month:"+month+",year:"+year);

咱们是能够获取到年月日信息的：

3、响应日期扭转事件：

在XML中增加Text显示抉择日期：

<Text        ohos:id="$+id:text_date"        ohos:height="match_content"        ohos:width="match_parent"        ohos:hint="date"        ohos:text_alignment="center"        ohos:margin="10vp"        ohos:padding="4vp"        ohos:text_color="#AA0000"        ohos:text_size="20fp">

在Java代码中响应日期扭转事件：

Text selectedDate = (Text) findComponentById(ResourceTable.Id_text_date);        datePicker.setValueChangedListener(                new DatePicker.ValueChangedListener() {                    @Override                    public void onValueChanged(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {                        // 格式化显示字符串                        selectedDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year));                    }                }        );

日期扭转响应成果：

4、设置以后日期

datePicker.updateDate(2021, 8, 8);

设置以后日期成果：

5、设置日期的范畴

如需对DatePicker的日期抉择范畴有要求，能够设置属性min_date和max_date。设置的值为日期对应的Unix工夫戳。

设置最小日期：

<DatePicker    ...    ohos:min_date="1623895868"></DatePicker>

或者在代码中设置：

datePicker.setMinDate(1623895868);

设置最小日期为2021/06/17：

设置最大日期：

在XML中设置：

<DatePicker    ...    ohos:max_date="1630339200"></DatePicker>

在代码中设置：

datePicker.setMaxDate(1630339200);

设置最大日期为2021/08/31：

固定年/月/日

在XML中设置：

<DatePicker    ...    ohos:year_fixed="true"></DatePicker>

在代码中设置：

datePicker.setYearFixed(true);

三、款式设置

1、文本相干属性

设置待选项的字体大小和色彩

<DatePicker    ...    ohos:normal_text_color="#00FFFF"    ohos:normal_text_size="20fp"></DatePicker>

设置待选项的字体大小和色彩成果：

设置已选项的字体大小和色彩

在XML中设置：

<DatePicker    ...    ohos:selected_text_color="#FF00FF"    ohos:selected_text_size="20fp"></DatePicker>

在代码中设置：

datePicker.setSelectedTextSize(40);datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FF00FF")));

设置已选项的字体大小和色彩成果：

设置操作项的字体色彩

在XML中设置：

<DatePicker    ...    ohos:operated_text_color="#FFA500"></DatePicker>

在代码中设置：

datePicker.setOperatedTextColor(new Color(Color.getIntColor("#FFA500")));

设置操作项的字体色彩成果

2、设置DatePicker中所选文本边距与一般文本边距的比例

在XML中设置：

<DatePicker    ...    ohos:selected_normal_text_margin_ratio="10"></DatePicker>

在代码中设置：

datePicker.setSelectedNormalTextMarginRatio(10.0f)

已选文本边距与失常文本边距比例设置为10的效果图：

3、设置滚轮绕行

在XML中设置：

<DatePicker    ...    ohos:wheel_mode_enabled="true"></DatePicker>

在代码中设置：

datePicker.setWheelModeEnabled(true);

滚轮绕行成果：

4、设置选中日期的高低边框

在XML中设置：

<DatePicker    ...    ohos:top_line_element="#9370DB"    ohos:bottom_line_element="#9370DB"></DatePicker>

在代码中设置：

ShapeElement shape = new ShapeElement();shape.setShape(ShapeElement.RECTANGLE);shape.setRgbColor(RgbColor.fromArgbInt(0xFF9370DB));datePicker.setDisplayedLinesElements(shape,shape);

增加选中项高低边框成果：

5、设置着色器色彩

在XML中设置：

<DatePicker    ...    ohos:shader_color="gray"></DatePicker>

在代码中设置：

datePicker.setShaderColor(new Color(Color.getIntColor("#00CED1")));

设置着色器色彩成果：

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换QQ群：714518656

4、视频课：https://www.chengxuka.com