HarmonyOS NEXT鸿蒙开发ArkUI:CalendarPicker日历组件

需要掌握:HarmonyOS NEXT鸿蒙开发 ArkTS:Date 日期时间对象

介绍

官网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%")
  }
}

原文出处:/show_1GW2Gd6XoDfB.html