HarmonyOS 6 CalendarPickerDialog 日历选择弹窗使用文档

文章目录完整代码功能概述代码结构说明核心参数详解1. 基础参数2. DateRange 结构说明3. 示例禁用区间配置说明总结完整代码Entry Component struct CalendarPickerDialogExample { private selectedDate: Date new Date(2025-08-05); private disabledDateRange: DateRange[] [ { start: new Date(2026-05-01), end: new Date(2026-05-02) }, { start: new Date(2026-05-09), end: new Date(2026-05-10) }, { start: new Date(2026-05-15), end: new Date(2026-05-16) }, { start: new Date(2026-05-19), end: new Date(2026-05-19) }, { start: new Date(2026-05-22), end: new Date(2026-05-25) } ]; build() { Stack({ alignContent: Alignment.Top }) { // $r(app.media.bg)需要替换为开发者所需的图像资源文件。 Image($r(app.media.bg)) Column() { Button(Show CalendarPicker Dialog) .margin(20) .onClick(() { CalendarPickerDialog.show( { markToday: true, disabledDateRange: this.disabledDateRange } ); }) }.width(100%) } } }运行效果如图功能概述页面点击按钮唤起系统日历选择弹窗支持自定义多段日期区间禁用禁用日期置灰不可选择开启markToday标记当天日期预先定义初始选中日期selectedDate页面底层支持自定义背景图片资源填充遵循官方CalendarPickerDialog.show()静态方法调用规范。代码结构说明页面入口Entry标识为独立页面入口组件成员变量定义selectedDate设置日历弹窗默认初始选中日期disabledDateRange数组类型批量定义多组禁用日期区间页面布局根容器Stack置顶对齐承载背景图与业务内容Image为页面背景资源需自行替换工程内媒体资源Column居中承载触发按钮弹窗触发点击按钮调用官方静态方法CalendarPickerDialog.show()传入配置参数唤起日历弹窗。核心参数详解1. 基础参数参数类型说明selectedDate日历弹窗初始默认选中日期代码已预先定义markTodayboolean是否高亮标记当前当天日期示例设为 truedisabledDateRangeDateRange[]多段禁用日期区间数组API 11 新增推荐属性2. DateRange 结构说明DateRange为官方日期区间对象固定结构start禁用区间开始日期end禁用区间结束日期支持单日禁用开始和结束为同一天、连续多天区间禁用。3. 示例禁用区间配置说明当前配置禁用时间段2026-05-01 ~ 2026-05-022026-05-09 ~ 2026-05-102026-05-15 ~ 2026-05-162026-05-19 单日禁用2026-05-22 ~ 2026-05-25以上所有日期在日历中自动置灰无法点击选择。总结CalendarPickerDialog采用静态 show 方法直接调用无需控制器实例disabledDateRange为 API 11 及以上支持低版本需做兼容处理支持多组区间并行禁用同时支持单日禁用与连续区间禁用背景图资源$r(app.media.bg)必须自行替换为工程有效资源否则报错初始选中日期selectedDate可自由修改年月日控制弹窗默认停留日期弹窗样式、生命周期由系统托管无需手动销毁关闭。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力