HarmonyOS 如何自定义时间选择器

可以参考如下demo：

let anmDuration: number = 200;
@Entry
@Component
struct TextPickerExample1 {
  @State firstDate: string = '2024-06-19'
  @State date: string = '2024年06月19号'
  controller: CustomDialogController = new CustomDialogController({
    builder: TextPicker1({
      cancel: (date: string) => {
        this.onCancel(date)
      },
      confirm: (date: string, date1: Date) => {
        this.onAccept(date, date1)
      },
      date: this.firstDate,
    }),
    autoCancel:false,
    cornerRadius: 0,
    customStyle: true,
    alignment: DialogAlignment.BottomEnd
  })

  onCancel(date: string) {

  }

  onAccept(date: string, date1: Date) {
    let year: string = date1.getFullYear().toString();
    let month: string = (date1.getMonth() + 1) < 10 ? ('0' + (date1.getMonth() + 1)).toString() : (date1.getMonth() + 1).toString();
    let day: string = date1.getDate().toString();
    this.date = year + '年' + month + '月' + day + '日'
    this.firstDate = year + '-' + month + '-' + day + '-'
  }

  build() {
    Column() {
      Text(this.date)
      Text('日期').onClick(() => {
        this.controller.open()
      })
    }
  }
}

@CustomDialog
struct TextPicker1 {
  aboutToAppear(): void {
    this.selectedDate = new Date(this.date)
  }

  @State date: string = '2026-08-08'
  controller: CustomDialogController
  //起始年份
  @State startYear: number = 1970
  @State isLunar: boolean = false
  @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;
  @State selectedDate: Date = new Date(this.date)
  cancel?: (date: string) => void
  confirm?: (date: string, date1: Date) => void
  // 延迟关闭弹窗，让自定义的出场动画显示

  @State nowDate: Date = new Date()

  destroy() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.controller.close()
    }, anmDuration)
  }

  build() {
    Column() {
      Column() {
        Row() {
          Button('取消', { type: ButtonType.Normal }).backgroundColor(Color.White).fontColor(Color.Gray)
            .onClick(() => {
              if (this.cancel) {
                this.destroy();
                this.cancel(this.date)
              }
            })
          Button('确定', { type: ButtonType.Normal }).backgroundColor(Color.White).fontColor("#fff5b6dd")
            .onClick(() => {
              if (this.confirm) {
                this.destroy();
                this.date = this.nowDate.toString()
                this.confirm(this.date, this.nowDate)
              }
            })
        }.width('100%').justifyContent(FlexAlign.SpaceBetween)

        DatePicker({
          start: new Date('1970-1-1'),
          end: new Date('2100-1-1'),
          selected: this.selectedDate
        })
          .disappearTextStyle({ color: Color.Gray, font: { size: '16fp', weight: FontWeight.Bold } })
          .textStyle({ color: '#ff182431', font: { size: '16', weight: FontWeight.Normal } })
          .selectedTextStyle({ color: "#fff5b6dd", font: { size: '22fp', weight: FontWeight.Regular } })
          .lunar(this.isLunar)
          .onDateChange((value: Date) => {
            this.nowDate = value
            console.info('select current date is: ' + value.toString())
          })
      }
    }.width('100%').backgroundColor(Color.White).visibility(this.showFlag)
    // 定义进场出场转场动画效果
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
      .combine(TransitionEffect.translate({ y: 100 })))
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.