关于harmonyos:310HarmonyOS鸿蒙开发组件DatePicker

3.10【HarmonyOS 鸿蒙开发】组件 DatePicker

作者：韩茹

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

鸿蒙巴士专栏作家

DatePicker 次要供用户抉择日期。

一、反对的 XML 属性

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

DatePicker 的自有 XML 属性见下表：

二、应用 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