一、操作环境
操作系统: 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()}