鸿蒙(HarmonyOS)自定义Dialog实现时间选择控件

一、操作环境

操作系统: 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()
  }
相关推荐
做运维的阿瑞2 分钟前
鸿蒙6.0技术解析:五大行业迎来的智能化革命
人工智能·harmonyos
鸿蒙Jy2 分钟前
一篇文章带你理解什么是鸿蒙开发中V1&&V2装饰器
harmonyos
SunkingYang25 分钟前
C++变量与函数命名规范技术指南 (基于华为编码规范与现代C++最佳实践)
c++·华为·编码规范·命名规则·命名规范·函数名字·成员变量
王嘉俊9251 小时前
HarmonyOS 项目入门:构建跨设备智能应用的强大框架
华为·harmonyos
Francek Chen1 小时前
【HarmonyOS 6 特别发布】鸿蒙 6 正式登场:功能升级,构建跨设备安全流畅新生态
人工智能·华为·harmonyos·harmonyos 6
王嘉俊9251 小时前
HarmonyOS 分布式与 AI 集成:构建智能协同应用的进阶实践
人工智能·分布式·harmonyos
The 旺2 小时前
【案例实战】HarmonyOS分布式购物车:多设备无缝协同的电商体验
分布式·wpf·harmonyos
爱笑的眼睛112 小时前
HarmonyOS分布式Kit:解锁跨设备协同开发的无限可能
华为·harmonyos
像是套了虚弱散10 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
鸿蒙小白龙14 小时前
OpenHarmony 6.0 低空飞行器开发实战:从AI感知检测到组网协同
人工智能·harmonyos·鸿蒙·鸿蒙系统·open harmony