18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器

18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器

点击button按钮触发事件显示月份与获取的时间

Button button3 = (Button) findComponentById(ResourceTable.Id_button3);
        button3.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                String time2_h = String.valueOf(timePicker.getHour()) ;
                String time2_m = String.valueOf(timePicker.getMinute()) ;
                String time2_s = String.valueOf(timePicker.getSecond()) ;
                new ToastDialog(getContext())
                        .setText("获取时间为:"+time2_h+":"+time2_m+":"+time2_s)
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });

支持的XML属性

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

DatePicker的自有XML属性见下表:

属性名称

中文描述

取值

取值说明

使用案例

date_order

显示格式,年月日

day-month-year

表示日期以日-月-年的格式显示。

ohos:date_order="day-month-year"

month-day-year

表示日期以月-日-年的格式显示。

year-month-day

表示日期以年-月-日的格式显示。

year-day-month

表示日期以年-日-月的格式显示。

day-month

表示日期以日-月的格式显示。

month-day

表示日期以月-日的格式显示。

year-month

表示日期以年-月的格式显示。

month-year

表示日期以月-年的格式显示。

only-year

表示只显示年份。

only-month

表示只显示月份。

only-day

表示只显示日期。

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:max_date="1234567"

ohos:max_date="$string:date"

min_date

最小日期

long类型

可以直接设置长整型值,也可以引用string资源。

ohos:min_date="1234567"

ohos:min_date="$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="$color:black"

ohos:top_line_element="$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="$color:black"

ohos:bottom_line_element="$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"

TimePicker的自有XML属性见下表:

表1 TimePicker的自有XML属性

属性名称

中文描述

取值

取值说明

使用案例

am_pm_order

在12小时制显示的情况下,控制上午下午排列顺序

start

表示am/pm列靠时间选择器起始端显示。

ohos:mode_24_hour="false"

ohos:am_pm_order="start"

end

表示am/pm列靠时间选择器结束端显示。

ohos:mode_24_hour="false"

ohos:am_pm_order="end"

left

表示am/pm列靠时间选择器左侧显示。

ohos:mode_24_hour="false"

ohos:am_pm_order="left"

right

表示am/pm列靠时间选择器右侧显示。

ohos:mode_24_hour="false"

ohos:am_pm_order="right"

mode_24_hour

是否24小时制显示

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:mode_24_hour="true"

ohos:mode_24_hour="$boolean:true"

hour

显示小时

integer类型

可以直接设置整型数值,也可以引用integer资源。

小时取值范围必须在0~23。

ohos:hour="23"

ohos:hour="$integer:hour"

minute

显示分钟

integer类型

可以直接设置整型数值,也可以引用integer资源。

分钟取值范围必须在0~59。

ohos:minute="59"

ohos:minute="$integer:minute"

second

显示秒

integer类型

可以直接设置整型数值,也可以引用integer资源。

秒钟取值范围必须在0~59。

ohos:second="59"

ohos:second="$integer:second"

normal_text_color

未选中文本的颜色

color类型

可以直接设置色值,也可以引用color资源。

ohos:normal_text_color="#FFFFFFFF"

ohos:normal_text_color="$color:black"

selected_text_color

选中文本的颜色

color类型

可以直接设置色值,也可以引用color资源。

ohos:selected_text_color="#FF45A5FF"

ohos:selected_text_color="$color:black"

operated_text_color

操作项的文本颜色

color类型

可以直接设置色值,也可以引用color资源。

ohos:operated_text_color="#A8FFFFFF"

ohos:operated_text_color="$color:black"

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"

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="3"

ohos:selector_item_num="$integer:num"

shader_color

着色器颜色

color类型

可以直接设置色值,也可以引用color资源。

ohos:shader_color="#A8FFFFFF"

ohos:shader_color="$color:black"

text_am

上午文本

string类型

可以直接设置文本字串,也可以引用string资源(推荐使用)。

ohos:text_am="8:00:00"

ohos:text_am="$string:am"

text_pm

下午文本

string类型

可以直接设置文本字串,也可以引用string资源(推荐使用)。

ohos:text_pm="22:00:00"

ohos:text_pm="$string:pm"

top_line_element

选中项的顶行

Element类型

可直接配置色值,也可引用color资源或引用media/graphic下的图片资源。

ohos:top_line_element="#FFFFFFFF"

ohos:top_line_element="$color:black"

ohos:top_line_element="$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="$color:black"

ohos:bottom_line_element="$media:media_src"

ohos:bottom_line_element="$graphic:graphic_src"

wheel_mode_enabled

选择轮是否循环显示数据

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:wheel_mode_enabled="false"

ohos:wheel_mode_enabled="$boolean:false"

MainAbilitySlice.java

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.DatePicker;
import ohos.agp.components.TimePicker;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_picker5);
        datePicker.updateDate(2008,8,8);//设置当前选择日期
        datePicker.setDateOrder(DatePicker.DateOrder.YMD); //显示年月日顺序
        datePicker.setSelectorItemNum(3);//显示项目的条数
        datePicker.setSelectedNormalTextMarginRatio(6);
        datePicker.setOperatedTextColor(Color.BLUE);
        TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker5);
        timePicker.set24Hour(false);// 12小时制, true:24小时制
        timePicker.setAmPmOrder(TimePicker.AmPmOrder.END);//AM.PM放在最后
        timePicker.setAmPmStrings("美好上午","精彩下午");
        timePicker.setRange(new int[]{8,0,0,21,59,59}); //可选时间8:00 -- 21:59
        //设置框线
        ShapeElement blueElement = new ShapeElement();
        blueElement.setRgbColor(new RgbColor(0,0,255));
        timePicker.setDisplayedLinesElements(blueElement,blueElement);
        //渐变背景颜色,灰色
        //timePicker.setShaderColor(new Color(Color.rgb(150,150,150)));
        timePicker.setShaderColor(new Color(Color.getIntColor("#1E90FF")));
        String date2 = String.valueOf(datePicker.getDayOfMonth());
        Button button1 = (Button) findComponentById(ResourceTable.Id_button1);
        button1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                new ToastDialog(getContext())
                        .setText("获取的月份:"+date2)
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });
        Button button3 = (Button) findComponentById(ResourceTable.Id_button3);
        button3.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                String time2_h = String.valueOf(timePicker.getHour()) ;
                String time2_m = String.valueOf(timePicker.getMinute()) ;
                String time2_s = String.valueOf(timePicker.getSecond()) ;
                new ToastDialog(getContext())
                        .setText("获取时间为:"+time2_h+":"+time2_m+":"+time2_s)
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

 ability_main.xml,布局文件

      

capsule_button_element.xml

放在目录:项目名称xxx\entry\src\main\resources\base\graphic

  

 按钮的样式:

使用方法: