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

爱被打了一巴掌 2022-10-19 00:55 289阅读 0赞

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

学弟：鸿蒙有没有好的时间选择器呢？  
  
码工：当然有啊，Android有的鸿蒙肯定有。  
  
学弟：开发复杂吗，作为开发者 最好是系统支持的！  
  
码工：鸿蒙在开发日期选择器的时候 只需要一个组件就搞定了。  
  
**适用场景：开发一个信息提交界面，页面中有信息采集，需要选择日期提交。**

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

![图片][f9d4265662f4545c6ce8143948ab5510.png]

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

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

### 简介 ###

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

![图片][447879c1ad9842ae8e090e1711932135.png]

### 用到的属性 ###

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

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

### 实战 ###

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

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

![图片][f254ea13d1e795e081da6361ae989a8b.png]

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

1，设置了最小和最大日期的时间戳  
ohos:min\_date="1627747200" // 设置最小日期的时间戳  
ohos:max\_date="1630339200" // 设置最大日期的时间戳

**3，设置固定年月日**

1，固定年月日 ，固定当前日期的年月日，设置后年月日无法做滚动选择  
ohos:year\_fixed="true" // 固定年  
ohos:month\_fixed="true" // 固定月  
ohos:day\_fixed="true" // 固定日

![图片][17438fa5f1a0d2b7e869ff16920ba35d.png]

**4，设置日期选择器样式**

**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**

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

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

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

> 作者：码工  
>

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

[f9d4265662f4545c6ce8143948ab5510.png]: /images/20221005/ea4a76d59e16499c94d7fd153c4fffb4.png
[447879c1ad9842ae8e090e1711932135.png]: /images/20221005/e0cab816129940de920bb297f12a4203.png
[f254ea13d1e795e081da6361ae989a8b.png]: /images/20221005/90299b3f76394a34a88549c0739b3f2d.png
[17438fa5f1a0d2b7e869ff16920ba35d.png]: /images/20221005/e1e409ca415b4ba996298e77d544ba10.png