需要掌握:HarmonyOS NEXT鸿蒙开发 ArkTS:Date 日期时间对象
介绍
日历选择器组件,提供下拉日历弹窗,可以让用户选择日期。
接口
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%")
}
}