鸿蒙（HarmonyOS）DatePicker+TimePicker时间选择控件

一、操作环境

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

二、效果图

       

可实现两种选择方式，可带时分选择，也可不带，使用更加方便。

三、代码

SelectedDateDialog.ets文件

/**
 * 时间选择
 */
@CustomDialog
export struct SelectedDateDialog {
  private selectedDate: Date
  private isShowTime: Visibility = Visibility.Hidden //是否展示时分栏
  private callback: (value: Date) => void
  controller: CustomDialogController //自定义dialog必须声明

  aboutToAppear() {
    console.log("时间选择展示：" + JSON.stringify(this.selectedDate))
  }

  build() {
    Column() {
      Row() {
        DatePicker({
          start: new Date('2000-1-1'), //起始时间
          end: new Date('2050-1-1'), //结束时间
          selected: this.selectedDate //默认所选时间
        })
          .width(this.isShowTime == Visibility.Visible ? '60%' : '100%') //不显示时分，则宽为100
          .height('100%')
          .lunar(false) //日期是否显示农历。 - true：展示农历。 - false：不展示农历。 默认值：false
          .onChange(value => {
            // console.log("轮换结果：" + JSON.stringify(value))
            this.selectedDate.setFullYear(value.year, value.month, value.day)
          })

        TimePicker({ selected: this.selectedDate })
          .width('35%')
          .height('100%')
          .visibility(this.isShowTime)
          .useMilitaryTime(true) //24小时制
          .onChange(value => {
            // console.info('select current date is: ' + JSON.stringify(value))
            if (value.hour >= 0) {
              this.selectedDate.setHours(value.hour, value.minute)
            }
          })
      }.width('100%')
      .height('80%')

      Blank()

      Button('确定').borderRadius('3').width('40%')
        .margin({ bottom: 20 })
        .onClick((event: ClickEvent) => {
          console.log('选择时间：' + JSON.stringify(this.selectedDate))
          this.callback?.(this.selectedDate)
          this.controller.close()
        })
    }
    .width('100%')
    .height('50%')
  }
}

使用其中的参数isShowTime控制是否显示时分栏的选择，Visibility.Visible为显示，Visibility.Hidden不显示

在page中的调用方式：

 @State selectInspectionTime: Date = new Date()
 selectInspectionDialog: CustomDialogController

initSelectInspectionDialog() {
    this.selectInspectionDialog = new CustomDialogController({
      builder: SelectedDateDialog({ 
        selectedDate: this.selectInspectionTime, 
        isShowTime: Visibility.Visible,
        callback: (value) => {
          let time = value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate()
          + "T" + value.getHours() + ":" + value.getMinutes() //月份从0开始，故需+1
        } }),
      cancel: this.closeInspectionDialog, //点击空白区域回调
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      offset: { dx: 0, dy: -20 },
      gridCount: 4,
      customStyle: false
    })
  }


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

openDialog() {
    //点击事件调用打开dialog
    this.selectInspectionDialog.open()
  }