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