HarmonyOS 6 TimePickerDialog 时间选择弹窗使用文档

文章目录完整源码功能概述代码结构说明核心参数TimePickerResult 对象说明总结完整源码// xxx.ets Entry Component struct TimePickerDialogExample { private selectTime: Date new Date(2022-07-22T08:00:00); build() { Stack({ alignContent: Alignment.Top }) { Image($r(app.media.bg)) Column() { Button(TimePickerDialog) .margin(20) .onClick(() { this.getUIContext().showTimePickerDialog({ useMilitaryTime: false, selected: this.selectTime, enableCascade: true, onAccept: (value: TimePickerResult) { // 设置selectTime为按下确定按钮时的时间这样当弹窗再次弹出时显示选中的为上一次确定的时间 if (value.hour ! undefined value.minute ! undefined) { this.selectTime.setHours(value.hour, value.minute); console.info(TimePickerDialog:onAccept() JSON.stringify(value)); } } }); }) }.width(100%) } } }运行效果如图功能概述页面点击按钮唤起时间选择弹窗支持12小时制展示自带上/下午选择开启级联选择模式时分联动滑动设置默认选中初始时间选择确定后自动记忆上次选择通过回调获取选择的时、分控制台打印日志采用官方推荐getUIContext().showTimePickerDialog方式调用适配新版UI上下文规范页面底层自定义背景图片布局。代码结构说明页面入口组件Entry标识为独立页面入口Component自定义UI组件。私有成员变量private selectTime: Date初始化默认选中时间2022-07-22T08:00:00用于弹窗默认回显与记忆选中时间。页面布局结构Stack层叠布局置顶对齐承载背景图与内容Image加载项目自定义背景资源app.media.bgColumn居中承载触发按钮点击按钮触发时间选择弹窗唤起逻辑。时间赋值逻辑确认选择后将回调返回的时、分重新赋值给selectTime实现下次打开弹窗默认选中上次时间的记忆效果。核心参数参数名类型取值功能说明useMilitaryTimebooleanfalse是否使用24小时制false 为12小时制显示上午/下午选择selectedDate绑定变量弹窗初始化默认选中的时间enableCascadebooleantrue是否开启时分级联滑动选择联动交互更符合原生体验onAccept回调函数-点击弹窗确定按钮触发返回TimePickerResult对象TimePickerResult 对象说明回调返回结构包含hour选中小时minute选中分钟通过判空后赋值给日期变量完成时间记忆保存。总结推荐使用getUIContext().showTimePickerDialog方式调用废弃旧版静态直接调用方式useMilitaryTime设为 false 自动带出上下午选择适合日常作息时间选择场景enableCascade开启级联后时分选择联动交互更流畅背景资源app.media.bg需开发者自行替换为项目有效图片资源否则资源加载异常选择时间后必须对hour、minute做非空判断避免未定义赋值报错弹窗生命周期由系统自动管理无需手动创建控制器销毁弹窗适配手机、平板、二合一设备遵循鸿蒙原生时间选择器交互规范。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力