鸿蒙应用开发 | 日期选择器(DatePicker)的功能和用法

最新推荐文章于 2024-06-23 12:01:52 发布

沉默的闪客

最新推荐文章于 2024-06-23 12:01:52 发布

阅读量2.3k

点赞数 1

分类专栏：鸿蒙应用开发入门到进阶文章标签：鸿蒙鸿蒙应用移动开发

本文链接：https://blog.csdn.net/jianpengxuexikaifa/article/details/118583726

版权

鸿蒙应用开发入门到进阶专栏收录该内容

27 篇文章 58 订阅

订阅专栏

导语：大家好，我是你们的朋友朋哥，鸿蒙开发已经半年了，了解到了鸿蒙的强大，也遇到了一些鸿蒙的缺陷，但是一个新的系统开发真的是很爽，后续说说感受。

学弟：鸿蒙有没有好的时间选择器呢？

码工：当然有啊，Android有的鸿蒙肯定有。

学弟：开发复杂吗，作为开发者最好是系统支持的！

码工：鸿蒙在开发日期选择器的时候只需要一个组件就搞定了。

适用场景：开发一个信息提交界面，页面中有信息采集，需要选择日期提交。

好了，下面开始我们今天的内容 DatePicker......

下面我们开始今天的文章，还是老规矩，通过如下几点来说：

1，简介
2，用到的属性
3，实战

简介

DatePicker主要供用户选择日期。可以设置日期选择格式，可以设置样式，效果如下：

用到的属性

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

属性名称	中文描述	取值
date_order	显示格式，年月日	0,1,2,3,4,5,6,7,8,9,10
			day_fixed	日期是否固定	boolean类型
			month_fixed	月份是否固定	boolean类型
			year_fixed	年份是否固定	boolean类型
			max_date	最大日期	long类型
			min_date	最小日期	long类型
			text_size	文本大小	float类型
			normal_text_size	取消选中文本的大小	float类型
			selected_text_size	选中文本的大小	float类型
			normal_text_color	取消选中文本的颜色	color类型
			selected_text_color	选中文本的颜色	color类型
operated_text_color	操作项的文本颜色	color类型
selected_normal_text_margin_ratio	已选文本边距与正常文本边距的比例	float类型
selector_item_num	显示的项数	integer类型
shader_color	着色器颜色	color类型
top_line_element	选中项的顶行	Element类型
bottom_line_element	选中项的底线	Element类型
wheel_mode_enabled	选择轮是否绕行	boolean类型

实战

1，创建一个项目添加默认 DatePicker

<DatePicker    ohos:id="$+id:date_pick"    ohos:height="match_content"    ohos:width="match_parent"    ohos:text_size="16fp"    />

默认的日期选择器，xml配置属性中直接添加就能显示效果，日期的格式是年月日。

2，设置日期的最小，最大值

<DatePicker  ohos:id="$+id:date_pick1"  ohos:height="match_content"  ohos:width="match_parent"  ohos:text_size="16fp"  ohos:min_date="1627747200"  ohos:max_date="1630339200"  ></DatePicker>

1，设置了最小和最大日期的时间戳
ohos:min_date="1627747200" // 设置最小日期的时间戳
ohos:max_date="1630339200" // 设置最大日期的时间戳

3，设置固定年月日

<DatePicker  ohos:id="$+id:date_pick2"  ohos:height="match_content"  ohos:width="match_parent"  ohos:text_size="16fp"  ohos:year_fixed="true"  ohos:month_fixed="true"  ohos:day_fixed="true"  ></DatePicker>

1，固定年月日，固定当前日期的年月日，设置后年月日无法做滚动选择
ohos:year_fixed="true" // 固定年
ohos:month_fixed="true" // 固定月
ohos:day_fixed="true" // 固定日

4，设置日期选择器样式

<DatePicker
    ohos:id="$+id:date_pick3"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text_size="16fp"

    ohos:normal_text_color="#000000" // 设置待选项的颜色
    ohos:normal_text_size="20fp" // 设置待选项的字体大小

    ohos:selected_text_color="#098988" // 设置已选项的字体颜色
    ohos:selected_text_size="25fp" // 设置已选项的字体大小

    ohos:operated_text_color="#776655" // 设置操作项的字体颜色

    ohos:selected_normal_text_margin_ratio="5" // 设置DatePicker中所选文本边距与普通文本边距的比例
    ohos:wheel_mode_enabled="true" // 设置滚轮绕行

    ohos:top_line_element="#9370DB" // 设置选中日期的上边框
    ohos:bottom_line_element="#9370DB" // 设置选中日期的下边框
    ohos:shader_color="gray" // 设置着色器颜色
    >
</DatePicker>

5，设置当前日期

datePicker.updateDate(2021, 8, 8);// 设置当前日期

6，获取日期选择器的选择日期

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));
        }
    }
);

完整代码：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="4vp"
        ohos:text_alignment="center|left"
        ohos:text_size="16fp"
        ohos:text="日期选择器，选择年月日 显示"
        />

    <DatePicker
        ohos:id="$+id:date_pick"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="16fp"
        />

    <Text
        ohos:id="$+id:text_date"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:hint="date"
        ohos:margin="4vp"
        ohos:text_alignment="center|left"
        ohos:text_size="16fp">
    </Text>

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="8vp"
        ohos:text_alignment="center|left"
        ohos:text_size="16fp"
        ohos:multiple_lines="true"
        ohos:text="日期选择器，设置最小日期 2021/08/01  最大日期 2021/08/31"
        />
    <DatePicker
        ohos:id="$+id:date_pick1"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="16fp"
        ohos:min_date="1627747200"
        ohos:max_date="1630339200"
        >
    </DatePicker>

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="4vp"
        ohos:text_alignment="center|left"
        ohos:text_size="16fp"
        ohos:multiple_lines="true"
        ohos:text="日期选择器，固定年月日"
        />
    <DatePicker
        ohos:id="$+id:date_pick2"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="16fp"
        ohos:year_fixed="true"
        ohos:month_fixed="true"
        ohos:day_fixed="true"
        >
    </DatePicker>

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="4vp"
        ohos:text_alignment="center|left"
        ohos:text_size="16fp"
        ohos:multiple_lines="true"
        ohos:text="日期选择器，设置样式"
        />
    <DatePicker
        ohos:id="$+id:date_pick3"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="16fp"

        ohos:normal_text_color="#000000"
        ohos:normal_text_size="20fp"

        ohos:selected_text_color="#098988"
        ohos:selected_text_size="25fp"

        ohos:operated_text_color="#776655"

        ohos:selected_normal_text_margin_ratio="5"
        ohos:wheel_mode_enabled="true"

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


</DirectionalLayout>

package com.example.datepicker.slice;

import com.example.datepicker.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DatePicker;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取DatePicker实例
        DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
        int day = datePicker.getDayOfMonth();
        int month = datePicker.getMonth();
        int year = datePicker.getYear();
//        datePicker.updateDate(2021, 8, 8);// 设置当前日期
        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));
                }
            }
        );
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

老规矩代码不能少，要不然小伙伴该说我小气了。
源码：
https://gitee.com/codegrowth/haomony-develop/tree/master/DatePicker

关注公众号【程序员漫话编程】，后台回复 ”鸿蒙“ ，即可获得上千鸿蒙开源组件。

原创不易，有用就关注一下。要是帮到了你就给个三连吧，多谢支持。

觉得不错的小伙伴，记得帮我 点个赞和关注哟，笔芯笔芯~**

作者：码工

有问题请留言或者私信，可以微信搜索：程序员漫话编程，关注公众号获得更多免费学习资料。

沉默的闪客

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
鸿蒙应用开发 | 日期选择器(DatePicker)的功能和用法

导语：大家好，我是你们的朋友朋哥，鸿蒙开发已经半年了，了解到了鸿蒙的强大，也遇到了一些鸿蒙的缺陷，但是一个新的系统开发真的是很爽，后续说说感受。学弟：鸿蒙有没有好的时间选择器呢？码工：当然有啊，Android有的鸿蒙肯定有。学弟：开发复杂吗，作为开发者最好是系统支持的！码工：鸿蒙在开发日期选择器的时候只需要一个组件就搞定了。适用场景：开发一个信息提交界面，页面中有信息采集，需要选择日期提交。好了，下面开始我们今天的内容DatePicker......下面我们开始...
复制链接

扫一扫