#跟着若城学鸿蒙# UI组件篇-日历选择器弹窗 (CalendarPickerDialog)及其属性

日历选择器弹窗（CalendarPickerDialog）是ArkUI框架中用于选择日期的模态弹窗组件。它提供了一个直观的日历界面，用户可以通过点击日期来选择特定的日期。该组件不仅支持基本的日期选择功能，还提供了丰富的配置选项，如自定义按钮样式、事件回调等，以满足不同场景的需求。可以通过和参数来自定义确认和取消按钮的样式：@Entry@Componentbuild() {Column() {},}

Huang兄

1101人浏览 · 2025-05-21 18:15:15

Huang兄 · 2025-05-21 18:15:15 发布

ArkUI 中的日历选择器弹窗 (CalendarPickerDialog) 详解

引言

在现代应用程序开发中，用户界面的友好性和交互性至关重要。日历选择器作为常见的UI组件，广泛应用于日期选择、事件安排等场景。ArkUI框架提供了丰富的UI组件，其中日历选择器弹窗（CalendarPickerDialog）以其灵活的配置和强大的功能，成为开发者实现日期选择功能的理想选择。本文将详细介绍ArkUI中的日历选择器弹窗，包括其基本概念、使用方法、配置选项、生命周期、事件处理以及实际应用案例。

什么是日历选择器弹窗（CalendarPickerDialog）

日历选择器弹窗（CalendarPickerDialog）是ArkUI框架中用于选择日期的模态弹窗组件。它提供了一个直观的日历界面，用户可以通过点击日期来选择特定的日期。该组件不仅支持基本的日期选择功能，还提供了丰富的配置选项，如自定义按钮样式、事件回调等，以满足不同场景的需求。

使用约束

在使用日历选择器弹窗时，需要注意以下几点：

UI执行上下文：日历选择器弹窗依赖于UI的执行上下文，不可在UI上下文不明确的地方使用。具体约束参见UIContext说明。
非模态弹窗：操作菜单（showActionMenu）、对话框（showDialog）、列表选择弹出框（ActionSheet）、警告弹出框（AlertDialog）可以设置isModal为false变成非模态弹窗。

基本使用方法

显示日历选择器弹窗

通过静态方法show来显示日历选择器弹窗：

CalendarPickerDialog.show(options?: CalendarDialogOptions);

参数说明

CalendarDialogOptions对象包含了日历选择器弹窗的配置参数：

参数名	类型	必填	说明
selected	Date	否	设置选中项的日期。默认值：当前系统日期。
onAccept	Callback<Date>	否	点击弹窗中的“确定”按钮时触发该回调。返回选中的日期值。
onCancel	VoidCallback	否	点击弹窗中的“取消”按钮时触发该回调。
onChange	Callback<Date>	否	选择弹窗中日期使当前选中项改变时触发该回调。返回选中的日期值。
backgroundColor11+	ResourceColor	否	弹窗背板颜色。默认值：Color.Transparent
backgroundBlurStyle11+	BlurStyle	否	弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK
acceptButtonStyle12+	PickerDialogButtonStyle	否	设置确认按钮显示样式。
cancelButtonStyle12+	PickerDialogButtonStyle	否	设置取消按钮显示样式。
onDidAppear12+	VoidCallback	否	弹窗弹出时的事件回调。
onDidDisappear12+	VoidCallback	否	弹窗消失时的事件回调。
onWillAppear12+	VoidCallback	否	弹窗显示动效前的事件回调。
onWillDisappear12+	VoidCallback	否	弹窗退出动效前的事件回调。

示例代码

以下是一个简单的示例，展示如何使用日历选择器弹窗：


@Entry
@Component
struct 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%')
  }
}

自定义按钮样式

可以通过acceptButtonStyle和cancelButtonStyle参数来自定义确认和取消按钮的样式：

@Entry
@Component
struct 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,
          acceptButtonStyle: {
            fontColor: '#2787d9',
            fontSize: '16fp',
            backgroundColor: '#f7f7f7',
            borderRadius: 10
          },
          cancelButtonStyle: {
            fontColor: Color.Red,
            fontSize: '16fp',
            backgroundColor: '#f7f7f7',
            borderRadius: 10
          },
          onAccept: (value) => {
            console.info("Selected Date: " + value.toString())
          }
        });
      })
    }.width('100%')
  }
}

事件回调

日历选择器弹窗提供了多个事件回调，以便在特定事件发生时执行相应的操作：

生命周期

日历选择器弹窗的生命周期包括以下几个阶段：

onWillAppear: 弹窗即将显示时的回调。
onDidAppear: 弹窗已经显示时的回调。
onWillDisappear: 弹窗即将消失时的回调。
onDidDisappear: 弹窗已经消失时的回调。

通过这些回调，开发者可以在不同的生命周期阶段执行相应的操作，如数据加载、界面更新等。

实际应用案例

案例1：弹出日历选择弹窗

该示例通过点击按钮弹出日历选择弹窗，并在选择日期后更新显示的日期。


@Entry
@Component
struct 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))
            this.selectedDate = 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%')
  }
}

案例2：悬停态弹窗

该示例展示了在折叠屏悬停态下设置dialog布局区域的效果。


@Entry
@Component
struct 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))
            this.selectedDate = 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%')
  }
}

总结

日历选择器弹窗（CalendarPickerDialog）是ArkUI框架中一个功能强大且灵活的组件，适用于各种需要日期选择的场景。通过丰富的配置选项和事件回调，开发者可以轻松实现定制化的日期选择功能。希望本文的介绍能够帮助开发者更好地理解和使用日历选择器弹窗，提升应用的用户体验和交互性。

----

以上

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

排列组合中的术语

HarmonyOS开发者社区

【鸿蒙心迹】新手入门鸿蒙设备开发：在摸索中解锁成长密码

文章目录前言一、开发板的选择二、搭建开发环境三、openharmony标准系统学习总结前言本文是我初学开源鸿蒙设备开发的一些学习心得，大家可以参考一下，希望对大家的学习能有所启发。一、开发板的选择对于初学者选择开发板时，最好选择OpenHarmony系统已经适配好可以直接在开发板上跑起来的且对应学习资料越全越好的开发板。笔者用的开发板：芯片为RK3568的开发板（具体可以在某宝上找，一

HarmonyOS开发者社区

HarmonyOS应用开发者的宝藏APP-HMOS代码工坊-组件堆叠滑动折叠效果（一）

目录前言拆解页面页面结构动画效果思路实现前言今天我们来拆解复刻一下HMOS代码工坊中的组件堆叠滑动折叠效果。当然这个是有源码的，但不妨碍我们自己先思考一下，工作中遇到其他效果也能自己实现。先看下效果图拆解页面页面结构大致划分为四个部分：顶部的个人头像和扫码效果搜索框：好物精选笔记本、智慧屏、音箱分类和商品列表动画效果搜索框好物精选模块在页面向上滑动时高度逐渐变小，最终高度固定，覆