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

一、操作环境

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

二、效果图

三、代码

SelectedDateDialog.ets文件

/*** 时间选择*/
@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中的调用方式：

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()}