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属性见下表:
属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
---|---|---|---|---|
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
按钮的样式:
使用方法: