Harmony OS — DatePicker日期选择器

Posted 2021-07-16 王睿丶

文章目录

• • 1、DatePicker 是什么？
  • 2、简单实现
  • 3、实战事件
  • 4、常用属性
  • 5、实战样式
  • 6、了解更多

1、DatePicker 是什么？

日期选择器

2、简单实现

    <DatePicker
        ohos:id="$+id:date_pick"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="20vp"
        ohos:background_element="#FF98C6F1">
    </DatePicker>

3、实战事件

（1）响应日期改变事件：

• 在XML中添加Text显示选择日期：

<Text
    ohos:id="$+id:text_date"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:hint="date"
    ohos:margin="8vp"
    ohos:padding="4vp"
    ohos:text_size="14fp">
</Text>

• 在Java代码中响应日期改变事件：

DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
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));
            }
        }
);

• 获取当前选择日期，日/月/年，DatePicker默认选择当前日期。

DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();

4、常用属性

（1）设置当前日期

datePicker.updateDate(2021, 8, 8);

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

• 设置最小日期

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

datePicker.setMinDate(1627747200);

• 设置最大日期

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

datePicker.setMaxDate(1630339200);

（3）固定年/月/日
xml与java选任意一种既可

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

datePicker.setYearFixed(true);

5、实战样式

（1）设置待选项的字体大小和颜色效果

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

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

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

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

（3）设置操作项的字体颜色

<DatePicker
    ...
    ohos:operated_text_color="#00FFFF">
</DatePicker>

datePicker.setOperatedTextColor(new Color(Color.getIntColor("#00FFFF")));

（4）设置DatePicker中所选文本边距与普通文本边距的比例

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

datePicker.setSelectedNormalTextMarginRatio(10.0f)

（5）设置滚轮绕行（数据循环）

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

datePicker.setWheelModeEnabled(true);

（6）设置选中日期的上下边框

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

（7）设置着色器颜色

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

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

6、了解更多

DatePicker