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 |
| backgroundBlurStyle | BlurStyle | 弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK |
| acceptButtonStyle | PickerDialogButtonStyle | 设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 |
| cancelButtonStyle | PickerDialogButtonStyle | 设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 |
| onDidAppear | () => void | 弹窗弹出时的事件回调。 |
| onDidDisappear | () => void | 弹窗消失时的事件回调。 |
| onWillAppear | () => void | 弹窗显示动效前的事件回调。 |
| onWillDisappear | () => void | 弹窗退出动效前的事件回调。 |
| 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、案 例
示例通过点击按钮弹出日历选择弹窗。效果如下：
代码如下：
标签：info,console,鸿蒙,onWillDisappear,value,UI,onDidAppear,选择器,弹窗 From： https://blog.csdn.net/harmonyClassRoom/article/details/145044620// 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%')}}