鸿蒙UI开发——日历选择器

news2025/1/11 6:36:34

1、概述

在项目开发中，我们时常会用到日历选择器，效果如下：

ArkUI已经为我们提供了组件，我们可以直接使用，下面针对日历组件做简单介绍。

2、CalendarPickerDialog

接口定义如下：

// 定义日历选择器弹窗并弹出。static show(options?: CalendarDialogOptions)

其中CalendarDialogOptions，是入参可选参数。属性定义如下：

名称	类型	说明
onAccept	(value: Date) => void	点击弹窗中的“确定”按钮时触发该回调。value：选中的日期值。
onCancel	() => void	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value: Date) => void	选择弹窗中日期使当前选中项改变时触发该回调。value：选中的日期值。
backgroundColor	ResourceColor	弹窗背板颜色。默认值：Color.Transparent 说明：当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。
backgroundBlurStyle	BlurStyle	弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK 说明：设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。
acceptButtonStyle	PickerDialogButtonStyle	设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。说明：acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。
cancelButtonStyle	PickerDialogButtonStyle	设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。说明：acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。
onDidAppear	() => void	弹窗弹出时的事件回调。说明：1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。2.在onDidAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。3.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。4. 当弹窗入场动效未完成时关闭弹窗，该回调不会触发。
onDidDisappear	() => void	弹窗消失时的事件回调。说明：1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。
onWillAppear	() => void	弹窗显示动效前的事件回调。说明：1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。2.在onWillAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。
onWillDisappear	() => void	弹窗退出动效前的事件回调。说明：1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。2.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。
shadow	ShadowOptions \| ShadowStyle	设置弹窗背板的阴影。当设备为2in1时，默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD，失焦为ShadowStyle.OUTER_FLOATING_SM
hintRadius	number \| Resource	描述日期选中态底板样式。默认值：底板样式为圆形。说明：hintRadius为0，底板样式为直角矩形。hintRadius为0 ~ 16，底板样式为圆角矩形。hintRadius>=16，底板样式为圆形
selected	Date	设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。默认值：当前系统日期。

3、案例

示例通过点击按钮弹出日历选择弹窗。效果如下：

代码如下：

// xxx.ets@Entry@Componentstruct CalendarPickerDialogExample {  private selectedDate: Date = new Date('2024-04-23')  build() {    Column() {      Button("Show CalendarPicker Dialog")        .margin(20)        .onClick(() => {          console.info("CalendarDialog.show")          CalendarPickerDialog.show({            selected: this.selectedDate,            onAccept: (value) => {              console.info("calendar onAccept:" + JSON.stringify(value))            },            onCancel: () => {              console.info("calendar onCancel")            },            onChange: (value) => {              console.info("calendar onChange:" + JSON.stringify(value))            },            onDidAppear: () => {              console.info("calendar onDidAppear")            },            onDidDisappear: () => {              console.info("calendar onDidDisappear")            },            onWillAppear: () => {              console.info("calendar onWillAppear")            },            onWillDisappear: () => {              console.info("calendar onWillDisappear")            }          })        })    }.width('100%')  }}