HarmonyOS 如何自定义时间选择器？

Question

如题：HarmonyOS 如何自定义时间选择器？

Answer 1

可以参考如下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 })))
  }
}