HarmonyOS 5.0.0 或以上：自定义日期选择器组件（支持年月日选择与回调）-CSDN博客

本文链接：https://blog.csdn.net/2501_92048894/article/details/148062731

📌 场景介绍

日期选择器在日程类、签到类、报名类应用中极为常见，本篇实现一个：

支持选择“年、月、日”
可传入默认日期
选择完成后回调通知外部

🧱 页面结构

/entry/src/main/ets
  ├── common/components/
  │   └── DatePicker.ets        // 自定义日期选择器组件
  ├── pages/
  │   └── DatePickerDemo.ets    // 示例页面

🧩 DatePicker.ets

@Component
export struct DatePicker {
  @Prop defaultYear: number = new Date().getFullYear()
  @Prop defaultMonth: number = new Date().getMonth() + 1
  @Prop defaultDay: number = new Date().getDate()
  @Prop onConfirm: (y: number, m: number, d: number) => void = () => {}

  @State year: number = this.defaultYear
  @State month: number = this.defaultMonth
  @State day: number = this.defaultDay

  private getDaysInMonth(y: number, m: number): number {
    return new Date(y, m, 0).getDate()
  }

  build() {
    Column() {
      Text("请选择日期").fontSize(18).margin(10)

      // 年
      Picker({
        range: Array.from({ length: 30 }, (_, i) => (1995 + i).toString()),
        selected: this.year - 1995,
        onChange: idx => this.year = 1995 + idx
      }).margin(5)

      // 月
      Picker({
        range: Array.from({ length: 12 }, (_, i) => (i + 1).toString()),
        selected: this.month - 1,
        onChange: idx => this.month = idx + 1
      }).margin(5)

      // 日
      Picker({
        range: Array.from({ length: this.getDaysInMonth(this.year, this.month) }, (_, i) => (i + 1).toString()),
        selected: this.day - 1,
        onChange: idx => this.day = idx + 1
      }).margin(5)

      Button("确认").margin(20).onClick(() => {
        this.onConfirm(this.year, this.month, this.day)
      })
    }
    .padding(20)
    .border({ width: 1, color: '#ccc' })
    .borderRadius(10)
  }
}

🧩 DatePickerDemo.ets 示例页面

@Entry
@Component
struct DatePickerDemo {
  @State selected: string = ''

  build() {
    Column() {
      DatePicker({
        defaultYear: 2024,
        defaultMonth: 12,
        defaultDay: 15,
        onConfirm: (y, m, d) => {
          this.selected = `${y}年${m}月${d}日`
        }
      })

      Text("选择结果：").fontSize(18).margin({ top: 20 })
      Text(this.selected).fontSize(20).fontColor('#007DFF')
    }
    .padding(30)
    .height('100%')
  }
}