鸿蒙开发（8）---DatePicker组件_xndatepicker

DatePicker组件

在我们讲解Picker组件实现城市地址选择时，是不是有的读者也想过用其实现日期的选择呢？

其实，Picker组件可以用于日期的选择，但是如果用于选择年月日，那么和城市一样你就要操作3个Picker组件，无疑增加了代码量。

而鸿蒙给我们直接提供了DatePicker组件今天日期的选择操作。下面，我们来讲解DatePicker组件的使用规则。

创建一个DatePicker组件

首先，我们通过XML布局文件创建一个DatePicker组件。同时也创建一个Text组件用于动态显示我们选择的时间。示例如下：

<DatePicker
    ohos:id="$+id:test_datepicker"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text_size="20fp"
    ohos:selected_text_color="#FFA500"
    ohos:date_order="2"/>

<Text
    ohos:id="$+id:test_test"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text_size="30fp"
    ohos:text_color="#FF0000"
    ohos:layout_alignment="center"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里，有一个陌生的属性需要注意，也就是date_order。

该属性定义了显示格式，比如这里2代表显示年月日，0代表显示日月年等。取值为0-10，后面的8-9分别只显示年月日的单个数据选择。

接着，我们需要通过Java代码设置DatePicker组件为当前的日期时间，并为其设置其样式。当然，还要初始化Text组件的日期也是当前时间。

示例代码如下所示：

public class MainAbilitySlice extends AbilitySlice{
    private DatePicker datePicker;
    private Text text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.datePicker=(DatePicker)findComponentById(ResourceTable.Id_test_datepicker);
        this.text=(Text)findComponentById(ResourceTable.Id_test_test);
        Calendar now = Calendar.getInstance();
        int year=Integer.valueOf(now.get(Calendar.YEAR));
        int month=Integer.valueOf(now.get(Calendar.MONTH))+1;
        int day=Integer.valueOf(now.get(Calendar.DAY_OF_MONTH));
        this.text.setText(new SimpleDateFormat("yyyy-MM-dd").format(now.getTime()));
        this.datePicker.updateDate(year,month,day);
        this.datePicker.setShaderColor(new Color(Color.getIntColor("#00FFFF")));
        ShapeElement shape = new ShapeElement();
        shape.setShape(ShapeElement.RECTANGLE);
        shape.setRgbColor(RgbColor.fromArgbInt(0xFF9370DB));
        this.datePicker.setDisplayedLinesElements(shape,shape);
        this.datePicker.setValueChangedListener(new DatePicker.ValueChangedListener() {
            @Override
            public void onValueChanged(DatePicker datePicker, int i, int i1, int i2) {
                text.setText(String.format("%04d-%02d-%02d", i, i1, i2));
            }
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

这里，我们通过Calendar类获取当前的时间，通过ShapeElement设置DatePicker组件的样式。

同样，为了获取我们的选择人日期，与Picker组件一样，DatePicker组件的监听选择事件为ValueChangedListener。

其中，i代表年year，i1代表月month，i2代表日day。运行之后，效果如首图所示。

其他重要属性

在上面的XML布局文件中，我们使用的属性除了date_order，其他的基本在前面的博文都使用过。

但其实它还有其他的重要属性。下面，博主专门用一个表格将这些属性一一列举出来：

比如，我们在代码中选择出生年月日，设置最小的日期选择。示例代码如下：

this.datePicker.setMinDate(getUnixDate("1950-01-01"));

private Long getUnixDate(String date){
    DateFormat df = new SimpleDateFormat("yyyy-MM-DD");
    long unix_date=0;
    try {
        unix_date = df.parse(date).getTime() / 1000;
        return unix_date;
    } catch (ParseException e) {
        e.printStackTrace();
        unix_date=1623254400;
        return unix_date;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行之后，效果如下：