3.10【HarmonyOS鸿蒙开发】组件DatePicker

最新推荐文章于 2024-01-05 10:22:19 发布
最新推荐文章于 2024-01-05 10:22:19 发布
阅读量983 收藏 2
点赞数
分类专栏： HarmonyOS鸿蒙系统应用开发教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanru723/article/details/118667569
版权

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=“ c o l o r : b l a c k " o h o s : t o p l i n e e l e m e n t = " color:black"ohos:top_line_element=" color:black"ohos:topl​inee​lement="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=“ c o l o r : b l a c k " o h o s : b o t t o m l i n e e l e m e n t = " color:black"ohos:bottom_line_element=" color:black"ohos:bottoml​inee​lement="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：

datepickeryunxing1

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

我们是可以获取到年月日信息的：

WX20210617-095920@2x

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

日期改变响应效果：

datepickeryunxing2

4、设置当前日期

datePicker.updateDate(2021, 8, 8);

设置当前日期效果：

WX20210617-100722@2x

5、设置日期的范围

如需对DatePicker的日期选择范围有要求，可以设置属性min_date和max_date。设置的值为日期对应的Unix时间戳。

设置最小日期：

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

或者在代码中设置：

datePicker.setMinDate(1623895868);

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

WX20210617-101331@2x

设置最大日期：

在XML中设置：

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

在代码中设置：

datePicker.setMaxDate(1630339200);

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

WX20210617-101545@2x

固定年/月/日

在XML中设置：

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

在代码中设置：

datePicker.setYearFixed(true);

三、样式设置

1、文本相关属性

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

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

设置待选项的字体大小和颜色效果：

WX20210617-101925@2x

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

在XML中设置：

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

在代码中设置：

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

设置已选项的字体大小和颜色效果：

WX20210617-102110@2x

设置操作项的字体颜色

在XML中设置：

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

在代码中设置：

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

设置操作项的字体颜色效果

datepickeryunxing3

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

在XML中设置：

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

在代码中设置：

datePicker.setSelectedNormalTextMarginRatio(10.0f)

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

WX20210617-102814@2x

3、设置滚轮绕行

在XML中设置：

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

在代码中设置：

datePicker.setWheelModeEnabled(true);

滚轮绕行效果：

WX20210617-104346@2x

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

添加选中项上下边框效果：

WX20210617-104511@2x

5、设置着色器颜色

在XML中设置：

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

在代码中设置：

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

设置着色器颜色效果：

WX20210617-104637@2x

更多内容：

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

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

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

韩茹_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙开发组件之DatePicker
Lu_Ca的博客
12-13 706
选择时间的回调也是onChange回调方法，回调对象是TimePickerResult类型，也可以拿到hour和minute。不过，当前版本有个系统bug，默认选中的日期不是今天。注意，回调函数的value是一个DatePickerResult类型的，不是Date类型。作为日期选择组件，当然选择日期才是它的目的，选择日期在onChange的回调函数中。DatePicker是鸿蒙开发中的日期组件，主要用来日期的选择。当然我们的start和end参数是可选的，不必须传递，所以初始化也可以是。
鸿蒙开源第三方组件——日期和时间处理组件JodaTime-ohos
VincenZsw的博客
06-21 1838
前言 基于安卓平台的日期和时间处理组件JodaTime-ohos（https://github.com/dlew/joda-time-android）， 实现鸿蒙化迁移和重构。代码已经开源到（https://gitee.com/isrc_ohos/joda-time_ohos），欢迎各位下载使用并提出宝贵意见！ 背景 JodaTime-ohos是一个日期和时间处理组件，可以获取标准时间、当前时间、相对时间、格式化时间等多种形式的时间，并支持对各类时间进行计算和判断。该组...
华为怎么用手机看时间到读秒_鸿蒙确认上线时间？华为宣布这几款手机无法升级，看有没有你的...
weixin_34329874的博客
01-13 449
随着经济的发展科技的进步，中国在很多科技领域都有了巨大的提升。虽说没有做到方方面面的优秀，但中国的科技能在这么多领域傲视群雄已经是非常难得的事情了，毕竟我们的科技大多都是从零到一，这份成就就已经是全天下独一份了。庆幸的是中国的科技与经济实力如今已经发展到了一个很高的水平，并且更重要的是，在中国发展的过程当中，涌现出了一批实力强劲的企业，正是因为中国企业生产的产品在世界上的影响力越来越大，所以才正向...
HarmonyOS应用开发-显示时间的实现
weixin_69135651的博客
04-23 1747
创建项目 示例代码 hml： <div class="container"> <text class="title">现在的时间是:</text> <text class="title">{{ year }}年{{ mouth }}月{{ day }}日</text> <text class="title">{{ hour }}:{{min}}</text> </di...
GridView中使用 jQuery DatePicker （UpdatePanel）
weixin_30384031的博客
02-26 70
1.无UpdatePanel 1.代码 <script> $(function () { $('.myDatePickerClass').datepicker({ dateFormat: 'yy-mm-dd' }); }); </script> <asp:TemplateField H...
华为鸿蒙小插件,mate30pro鸿蒙系统无法加载时钟小部件
weixin_39765325的博客
05-28 1502
[问题反馈]mate30pro鸿蒙系统无法加载时钟小部件15937电梯直达huafen004964406新学乍练发表于 2021-3-12 07:10:53来自：HUAWEI Mate 30 Pro 5G最新回复 2021-4-23 17:10:06Mate30pro鸿蒙系统无法加载时钟小部件Screenshot_20210312_070329_com.huawei.android.launche...
react自定义日期组件datePicker
01-13
在React开发中，组件化是核心特性之一，它允许我们将应用拆分成独立、可复用的部件，提高代码的组织性和可维护性。本案例中，我们关注的是一个使用TypeScript（ts）和React的JSX语法（tsx）实现的自定义日期选择组件...
Vue的Datepicker组件-JavaScript开发
05-26
Vue Datepicker组件VueJs的Datepicker组件（https://edisdev.github.io/vue-datepicker-ui）道具<Calendar v-model =“”：range =“”：lang =“”：firstDayOfWeek =“” Vue Datepicker组件VueJs的Datepicker...
Android开发中DatePicker日期与时间控件实例代码
01-05
一、简介 二、方法 最日常的使用方法了 日期控件DatePicker ...import android.os.Bundle; import android.widget.DatePicker; import android.widget.DatePicker.OnDateChangedListener; import androi
java swing 日期datepicker组件使用
12-25
在Swing中，DatePicker是一个非常有用的组件，允许用户选择日期。这个压缩包包含了使用DatePicker组件的示例项目以及相关的jar包，帮助我们了解如何在Swing应用中集成和操作这个日期选择器。 DatePicker组件在Swing...
jQueryUI Datepicker组件设置日期高亮
10-21
jQueryUI Datepicker组件是jQuery UI库中的一个强大日期选择器，它提供了丰富的功能和自定义选项，使得在网页中添加日期选择功能变得简单易行。在某些场景下，我们可能需要突出显示日历中的特定日期，比如标记重要的...
打开手机时间的秒显示，即状态栏时间显示秒针功能
bestwu0666的博客
02-22 7747
打开手机时间的秒显示，即状态栏时间显示秒针功能 systemui
鸿蒙os设置最佳时间,鸿蒙OS终于登陆手机端：时间敲定、90％以上机型可升
weixin_35767799的博客
05-31 1350
去年8月，余承东正式揭晓了华为操作系统鸿蒙OS，智慧屏成为旗下首款搭载鸿蒙OS的终端产品。在今年的华为开发者大会上，鸿蒙OS 2.0正式亮相，将进一步进入大屏、手表、车机等终端，拥有跨设备、服务流转、极速直达、可视可说、隐私安全等特性。日前有博主爆料称，手机鸿蒙OS 2.0已经暂定在12月18日开放Beta测试版本，明年一二月份面向部分手机用户提供升级渠道，之后会进行几个月时间的初步升级验证，然后...
鸿蒙应用开发 | 日期选择器(DatePicker)的功能和用法
07-08 2236
导语：大家好，我是你们的朋友 朋哥，鸿蒙开发已经半年了，了解到了鸿蒙的强大，也遇到了一些鸿蒙的缺陷，但是一个新的系统开发真的是很爽，后续说说感受。 学弟：鸿蒙有没有好的时间选择器呢？ 码工：当然有啊，Android有的鸿蒙肯定有。 学弟：开发复杂吗，作为开发者 最好是系统支持的！ 码工：鸿蒙在开发日期选择器的时候 只需要一个组件就搞定了。适用场景：开发一个信息提交界面，页面中有信息采集，需要选择日期提交。 好了，下面开始 我们今天的内容DatePicker...... 下面我们开始...
安卓手机状态栏显示秒_如何让状态栏时间精确到秒显示
weixin_39727934的博客
12-20 5685
N7100的状态栏时间精确到秒显示：靠左边、原始靠右边。一、状态栏时间精确秒显示(靠左边)1.首先，反编译SystemUI.apk2.找到文件：SystemUI.apk\res\layout\tw_status_bar.xml(推荐用Notepda+打开编辑)3.删除以下代码：android:textSize="@dimen/status_bar_clock_text_size"android:t...
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)
m0_62599305的博客
10-29 2642
TextClock组件:通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。TextPicker组件：滑动选择文本内容的组件。TextClock组件:通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。TextPicker组件：滑动选择文本内容的组件。
取消Tomcat对POST请求长度限制
热门推荐
ourLang
09-08 1万+
1 Request header is too large 从字面意思可知，是请求头过大，设置connector的maxHttpHeaderSize为大点的值即可，单位byte，默认值：8192 (8 KB)。官方文档原文如下：http://tomcat.apache.org/tomcat-9.0-doc/config/http.html#Standard_Implementation maxHttpHeaderSize : The maximum size of the request and resp
Docker+GitLab+Jenkins 搭建 CI/CD 系统
博客
11-25 684
软件安装环境如下。 操作系统：CentOS 7 Jenkins：tls 长期维护版 Docker：19.03 GitLab：13.3.8-ce.0 第一步：安装 Docker 安装 Docker 的步骤可以参考这篇文章：Centos7安装Docker，这里就不再赘述。Docker 环境准备好后，我们就可以利用 Docker 来部署 GitLab 和 Jenkins 了。 第二步：安装 GitLab GitLab 官方提供了 GitLab 的 Docker 镜像，因此我们只需要执行以下命令就可以快速启动一
鸿蒙OS应用开发之日期选择
最新发布
大坡3D软件开发
01-05 838
前面学习了时间选择组件，实现了时间的选择，这样非常方便用户进行时间的输入，通过手动就可以输入时间，比直接文本输入要省不少时间，特别对于手机这样单手操作的设备，更加重要了。因此，日期的输入工作也不能落后，本文将要学习日期选择组件，这样就可以实现日期通过手上下移动的方式来对日历进行输入。还有中国人的节气，也是根据农历来看的，所以日历的设计上，就会有两种显示方式。此函数当用户选择一次日期之后，就会调用一次这里设置的回调函数，我们把代码写在回调函数里，就可以获得参数输入的日期，就是当前用户设置的日期value。
react实现antd组件DatePicker日期选择框清空
06-08
antd的DatePicker组件也可以通过类似的方式实现清空功能。antd的DatePicker组件提供了一个allowClear属性，设置为true时就可以显示清空按钮。在清空按钮的点击事件中，可以将DatePicker组件的值设置为null或默认值。 示例代码： ``` import React, { useState } from 'react'; import { DatePicker } from 'antd'; function App() { const [date, setDate] = useState(null); const handleClear = () => { setDate(null); }; return ( <> <DatePicker value={date} onChange={value => setDate(value)} allowClear /> <button onClick={handleClear}>清空</button> </> ); } export default App; ``` 在这个示例中，另一个需要注意的点是，antd的DatePicker组件的值是一个Moment.js对象，而不是一个Date对象。因此，在onChange事件中获取到的value是一个Moment.js对象。如果需要将其转换为Date对象，可以使用toDate方法，例如：value.toDate()。 另外，antd的DatePicker组件还提供了一个ref属性，可以通过获取到这个ref来调用DatePicker组件的方法，包括clear方法。使用方式与React中的示例类似。 示例代码： ``` import React, { useRef } from 'react'; import { DatePicker } from 'antd'; function App() { const datePickerRef = useRef(null); const handleClear = () => { datePickerRef.current.clear(); }; return ( <> <DatePicker ref={datePickerRef} allowClear /> <button onClick={handleClear}>清空</button> </> ); } export default App; ``` 以上是在React中使用antd的DatePicker组件实现清空功能的方法，可以根据实际需要选择适合自己的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值