简介
DatePicker主要供用户选择日期。可以设置日期选择格式,可以设置样式,效果如下:
用到的属性
DatePicker的共有XML属性继承自:StackLayout
实战
1,创建一个项目 添加默认 DatePicker
<DatePicker
ohos:id="$+id:date_pick"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
/>
默认的日期选择器,xml配置属性中直接添加 就能显示效果,日期的格式是年月日。
2,设置日期的最小,最大值
<DatePicker
ohos:id="$+id:date_pick1"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
ohos:min_date="1627747200"
ohos:max_date="1630339200"
>
</DatePicker>
1,设置了最小和最大日期的时间戳
ohos:min_date="1627747200" // 设置最小日期的时间戳
ohos:max_date="1630339200" // 设置最大日期的时间戳
3,设置固定年月日
<DatePicker
ohos:id="$+id:date_pick2"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
ohos:year_fixed="true"
ohos:month_fixed="true"
ohos:day_fixed="true"
>
</DatePicker>
1,固定年月日 ,固定当前日期的年月日,设置后年月日无法做滚动选择
ohos:year_fixed="true" // 固定年
ohos:month_fixed="true" // 固定月
ohos:day_fixed="true" // 固定日
4,设置日期选择器样式
<DatePicker
ohos:id="$+id:date_pick3"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
ohos:normal_text_color="#000000" // 设置待选项的颜色
ohos:normal_text_size="20fp" // 设置待选项的字体大小
ohos:selected_text_color="#098988" // 设置已选项的字体颜色
ohos:selected_text_size="25fp" // 设置已选项的字体大小
ohos:operated_text_color="#776655" // 设置操作项的字体颜色
ohos:selected_normal_text_margin_ratio="5" // 设置DatePicker中所选文本边距与普通文本边距的比例
ohos:wheel_mode_enabled="true" // 设置滚轮绕行
ohos:top_line_element="#9370DB" // 设置选中日期的上边框
ohos:bottom_line_element="#9370DB" // 设置选中日期的下边框
ohos:shader_color="gray" // 设置着色器颜色
>
</DatePicker>
5,设置当前日期
datePicker.updateDate(2021, 8, 8);// 设置当前日期
6,获取日期选择器的选择日期
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));
}
}
);
完整代码:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:margin="4vp"
ohos:text_alignment="center|left"
ohos:text_size="16fp"
ohos:text="日期选择器,选择年月日 显示"
/>
<DatePicker
ohos:id="$+id:date_pick"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
/>
<Text
ohos:id="$+id:text_date"
ohos:height="match_content"
ohos:width="match_parent"
ohos:hint="date"
ohos:margin="4vp"
ohos:text_alignment="center|left"
ohos:text_size="16fp">
</Text>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:margin="8vp"
ohos:text_alignment="center|left"
ohos:text_size="16fp"
ohos:multiple_lines="true"
ohos:text="日期选择器,设置最小日期 2021/08/01 最大日期 2021/08/31"
/>
<DatePicker
ohos:id="$+id:date_pick1"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
ohos:min_date="1627747200"
ohos:max_date="1630339200"
>
</DatePicker>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:margin="4vp"
ohos:text_alignment="center|left"
ohos:text_size="16fp"
ohos:multiple_lines="true"
ohos:text="日期选择器,固定年月日"
/>
<DatePicker
ohos:id="$+id:date_pick2"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
ohos:year_fixed="true"
ohos:month_fixed="true"
ohos:day_fixed="true"
>
</DatePicker>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:margin="4vp"
ohos:text_alignment="center|left"
ohos:text_size="16fp"
ohos:multiple_lines="true"
ohos:text="日期选择器,设置样式"
/>
<DatePicker
ohos:id="$+id:date_pick3"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_size="16fp"
ohos:normal_text_color="#000000"
ohos:normal_text_size="20fp"
ohos:selected_text_color="#098988"
ohos:selected_text_size="25fp"
ohos:operated_text_color="#776655"
ohos:selected_normal_text_margin_ratio="5"
ohos:wheel_mode_enabled="true"
ohos:top_line_element="#9370DB"
ohos:bottom_line_element="#9370DB"
ohos:shader_color="gray"
>
</DatePicker>
</DirectionalLayout>
package com.example.datepicker.slice;
import com.example.datepicker.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DatePicker;
import ohos.agp.components.Text;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
// 获取DatePicker实例
DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();
// datePicker.updateDate(2021, 8, 8);// 设置当前日期
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));
}
}
);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
源码:
https://gitee.com/codegrowth/haomony-develop/tree/master/DatePicker
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118583726