鸿蒙（HarmonyOS）自定义Dialog实现时间选择控件

健飞2024-07-27 20:30

一、操作环境

操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0（API 9）

二、效果图

三、代码

复制代码

SelectedDateDialog.ets文件

TypeScript 复制代码

/**
 * 时间选择
 */
@CustomDialog
export struct SelectedDateDialog {
  @State selectedDate: Date = new Date()
  private callback: (value: DatePickerResult) => void
  @State value: DatePickerResult = {
    year: new Date().getFullYear(),
    month: new Date().getMonth(),
    day: parseInt(new Date().getDate().toString().padStart(2, '0')) }
  controller: CustomDialogController//自定义dialog必须声明

  aboutToAppear() {
    console.log("时间选择Loading展示》》》》》")
  }

  build() {
    Column() {
      DatePicker({
        start: new Date('2014-1-1'), //起始时间
        end: new Date('2030-1-1'), //结束时间
        selected: this.selectedDate, //默认所选时间
      })
        .margin({ top: 20 })
        .lunar(false) //日期是否显示农历。 - true：展示农历。 - false：不展示农历。 默认值：false
        .onChange(value => {
          console.log("轮换结果：" + value)
          this.value = value
        })

      Blank()

      Button('确定').borderRadius('3').width('30%')
        .margin({ bottom: 20 })
        .onClick((event: ClickEvent) => {
          console.log("时间：" + this.value.year + this.value.month + this.value.day)
          this.callback?.(this.value)
          this.controller.close()
        })
    }
    .width('100%')
    .height('50%')
  }
}

在page中的调用方式：

TypeScript 复制代码

selectTimeDialog: CustomDialogController = new CustomDialogController({
    builder: SelectedDateDialog({ callback: (value) => {
      console.log("选择结果：" + value.year)
      this.changeTime = value.year + "-" + (value.month + 1) + "-" + value.day//月份从0开始，故需+1
    } }),
    cancel: this.closeDialog, //点击空白区域回调
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })

  closeDialog() {
    console.info('Click the callback in the blank area')
    this.selectTimeDialog.close()
  }

  openDialog() {
    //点击事件中直接调用
    this.selectTimeDialog.open()
  }