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