1、概 述

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

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

2、CalendarPickerDialog

接口定义如下：

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

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

3、案 例

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

代码如下： 

// xxx.ets
@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%')
  }
}