HarmonyOS NEXT鸿蒙开发ArkUI：CalendarPicker日历组件-马育民老师

需要掌握：[HarmonyOS NEXT鸿蒙开发 ArkTS：Date 日期时间对象](https://www.malaoshi.top/show_1GW2F5b7dnaW.html "HarmonyOS NEXT鸿蒙开发 ArkTS：Date 日期时间对象")

# 介绍

[官网API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-calendarpicker-V5 "官网API")

日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。

# 接口

```
CalendarPicker(options?: CalendarOptions)
```

**参数：**

- options：CalendarOptions，配置日历选择器组件的参数

# 事件

### onChange

选择日期时触发该事件。

```
onChange(callback: (value: Date) => void)
```

**参数：**

- value：`Date` 类型，选中的日期

# CalendarOptions对象说明

- selected：`Date`类型，设置选中项的日期，不支持 `$$` 双向绑定

# 例子

```
@Entry
@Component
struct Index {

@State rili:Date = new Date(2025,10,1)

build() {
    Column(){
      CalendarPicker()

CalendarPicker({
        selected:this.rili // 设置默认选中的日期
      })
        .onChange( value=>{
          // value 是选中的日期
          console.log("选中的日期：",value)
          this.rili = value
        })

Button("搜索")
        .onClick( ()=>{
            console.log("搜索按钮-日期：",this.rili)
        })
    }
    // 设置宽度 + 设置水平居中
    .width("100%")
    .alignItems(HorizontalAlign.Center)
    // 垂直居中，要注意：得有足够的高度
    // .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

```

原文出处：http://malaoshi.top/show_1GW2Gd6XoDfB.html