开天辟地 HarmonyOS(鸿蒙) - 组件(选择类): CalendarPicker(日历选择框)

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 组件(选择类): CalendarPicker(日历选择框)

示例如下:

pages\component\selection\CalendarPickerDemo.ets

/*
 * CalendarPicker - 日历选择框
 */

import { TitleBar } from '../../TitleBar'

@Entry
@Component
struct CalendarPickerDemo {

  @State message:string = ""

  build() {
    Column({ space: 10 }) {
      TitleBar()

      Text(this.message).fontSize(16)

      /*
       * CalendarPicker - 日历选择框
       *   selected - 当前选中的日期
       *   hintRadius - 日历上的选中日期的矩形背景框的圆角半径
       *   edgeAlign() - 日历相对于显示框的位置(CalendarAlign 枚举)
       *     START, CENTER, END
       *   textStyle() - 显示框中的文本的样式
       *   onChange() - 选中日期变化时的回调
       *     value - 当前选中日期的 Date 对象
       */
      CalendarPicker({
        selected: new Date(),
        hintRadius: 10,
      })
        .edgeAlign(CalendarAlign.END)
        .textStyle({
          color: Color.Red,
          font: {
            size: 24,
            weight: 400,
          }
        })
        .onChange((value) => {
          this.message = `onChange ${JSON.stringify(value)}`
        })
    }
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @ 2025-02-05 14:51  webabcd  阅读(72)  评论(0)    收藏  举报