日历选择器

提供下拉日历弹窗.可以让用户自己选择日期

效果

子组件

无

接口

hintRadius

描述日期选中态底版样式 取值 [0,16] 简单来说就是圆角矩形的 radius

selected

设置选中项的日期 默认值

 private selectedDate: Date = new Date('2024-03-05');

属性

edgeAlign

• 第一个参数 是位置 第二个参数 是偏移量

.edgeAlign(CalendarAlign.CENTER,{dx:120,dy:130})

testStyle

• 设置选中态底版文字样式

  .textStyle({ color: "red", font: { size: 20, weight: FontWeight.Normal } })

事件

 .onChange((value) => {
    console.info("CalendarPicker onChange:" + JSON.stringify(value));
})

示例

@Entry
@Component
struct Index4 {
  private selectedDate: Date = new Date('2024-03-05');
    build() {
      Column() {

        Column() {
          CalendarPicker({ hintRadius: 16, selected: this.selectedDate })
            // 偏移量
            .edgeAlign(CalendarAlign.CENTER,{dx:120,dy:130})
            .textStyle({ color: "red", font: { size: 20, weight: FontWeight.Normal } })
            .margin(10)
            .onChange((value) => {
              console.info("CalendarPicker onChange:" + JSON.stringify(value));
            })
        }.alignItems(HorizontalAlign.Center).width("100%")
      }.width('100%').margin({ top: 350 })
    }
}