# 日历选择器弹窗 (CalendarPickerDialog) > phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ 点击日期弹出日历选择器弹窗，可在弹窗内选择日期。适用于需要在应用中进行日期选择的场景，如日程管理、预订系统、表单填写等。 > 说明 > > * 该组件从API version 10开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 > > * 本模块功能依赖UI的执行上下文，不可在[UI上下文不明确](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-global-interface#ui上下文不明确)的地方使用，参见[UIContext](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-uicontext)说明。 > > * 本模块不支持深浅色模式热更新，如果需要进行深浅色模式切换，请重新打开弹窗。 ## CalendarPickerDialog ### show static show(options?: CalendarDialogOptions): void 显示日历选择器弹窗，供用户选择日期。 **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 **模型约束：** 此接口仅可在Stage模型下使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **设备行为差异：** 该接口在Wearable设备上不支持，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 **参数：** |参数名|类型|必填|说明| |:------|:--------------------------------------------------|:-|:----------------------| |options|[CalendarDialogOptions](#calendardialogoptions对象说明)|否|配置日历选择器弹窗的参数，缺省时无法弹出弹窗。| ## CalendarDialogOptions对象说明 日历选择器弹窗选项。 继承自[CalendarOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-calendarpicker#calendaroptions对象说明)。 **模型约束：** 此接口仅可在Stage模型下使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **设备行为差异：** 该接口在Wearable设备上不支持，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 |名称|类型|只读|可选|说明| |:------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-|:-|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |onAccept|[Callback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#callback12)|否|是|点击弹窗中的"确定"按钮时触发该回调。 回调函数的参数表示选中的日期值。 **元服务API：** 从API version 11开始，该接口支持在元服务中使用。| |onCancel|[VoidCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#voidcallback12)|否|是|点击弹窗中的"取消"按钮时触发该回调。 **元服务API：** 从API version 11开始，该接口支持在元服务中使用。| |onChange|[Callback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#callback12)|否|是|选择弹窗中日期使当前选中项改变时触发该回调。 回调函数的参数表示选中的日期值。 **元服务API：** 从API version 11开始，该接口支持在元服务中使用。| |backgroundColor^11+^|[ResourceColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcecolor)|否|是|弹窗背板颜色。 默认值：Color.Transparent **说明：** 当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则背景颜色显示效果不符合预期。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |backgroundBlurStyle^11+^|[BlurStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#blurstyle9)|否|是|弹窗背板模糊材质。 默认值：BlurStyle.COMPONENT_ULTRA_THICK **说明：** 设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则背景颜色显示效果不符合预期。设置backgroundEffect后将覆盖本属性效果。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |backgroundBlurStyleOptions^19+^|[BackgroundBlurStyleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundblurstyleoptions10对象说明)|否|是|背景模糊效果参数，用于自定义弹窗背景模糊的显示样式，支持配置颜色模式、自适应颜色、缩放比例等属性，实现不同的背景模糊视觉效果。默认值请参考BackgroundBlurStyleOptions类型说明。 **说明：** 未设置时沿用backgroundBlurStyle的默认效果（BlurStyle.COMPONENT_ULTRA_THICK）。 **元服务API：** 从API version 19开始，该接口支持在元服务中使用。| |backgroundEffect^19+^|[BackgroundEffectOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundeffectoptions11)|否|是|背景效果参数，用于自定义弹窗背景的显示效果，支持配置模糊半径、饱和度、亮度、颜色等属性，实现不同的背景视觉效果。默认值请参考BackgroundEffectOptions类型说明。 **说明：** 未设置时不生效，此时弹窗背景模糊效果由backgroundBlurStyle决定；设置后将覆盖backgroundBlurStyle的效果。从API版本26.0.0开始，设置systemMaterial后backgroundEffect与backgroundBlurStyle均不生效。 **元服务API：** 从API version 19开始，该接口支持在元服务中使用。| |acceptButtonStyle^12+^|[PickerDialogButtonStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-picker-common#pickerdialogbuttonstyle12对象说明)|否|是|设置确认按钮显示样式、重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 **说明：** 1.acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。 2.按钮高度默认40vp，在关怀模式-大字体场景下高度不变。即使按钮样式设置为圆角矩形[ROUNDED_RECTANGLE](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button#buttontype枚举说明)，在关怀模式-大字体场景下按钮形状仍呈现为胶囊型按钮[Capsule](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button#buttontype枚举说明)的样式。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |cancelButtonStyle^12+^|[PickerDialogButtonStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-picker-common#pickerdialogbuttonstyle12对象说明)|否|是|设置取消按钮显示样式、重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 **说明：** 1.acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。 2.按钮高度默认40vp，在关怀模式-大字体场景下高度不变。即使按钮样式设置为圆角矩形[ROUNDED_RECTANGLE](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button#buttontype枚举说明)，在关怀模式-大字体场景下按钮形状仍呈现为胶囊型按钮[Capsule](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button#buttontype枚举说明)的样式。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |onDidAppear^12+^|[VoidCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#voidcallback12)|否|是|弹窗弹出后的事件回调。 **说明：** 1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。 2.在onDidAppear内设置改变显示效果的回调事件，再次调用show时生效。 3.快速连续触发弹出与关闭时，存在onWillDisappear在onDidAppear前生效。 4. 当弹窗入场动效未完成时关闭弹窗，该回调不会触发。 **选取指导：** - onWillAppear：适合在弹窗显示前准备数据、重置状态。 - onDidAppear：适合在弹窗完全显示后执行动画、发起网络请求、设置焦点等需要弹窗可见才能进行的操作。 - onWillDisappear：适合在弹窗消失前保存数据、清理资源、取消网络请求。 - onDidDisappear：适合在弹窗完全消失后执行清理工作、重置状态、恢复其他UI。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |onDidDisappear^12+^|[VoidCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#voidcallback12)|否|是|弹窗消失后的事件回调。 **说明：** 1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |onWillAppear^12+^|[VoidCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#voidcallback12)|否|是|弹窗显示动效前的事件回调。 **说明：** 1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。 2.在onWillAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |onWillDisappear^12+^|[VoidCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#voidcallback12)|否|是|弹窗退出动效前的事件回调。 **说明：** 1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。 2.快速连续触发弹出与关闭时，存在onWillDisappear在onDidAppear前生效。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |shadow^12+^|[ShadowOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect#shadowoptions对象说明) | [ShadowStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect#shadowstyle10枚举说明)|否|是|设置弹窗背板的阴影。 当设备为2in1时，默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD，失焦为ShadowStyle.OUTER_FLOATING_SM。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。| |enableHoverMode^14+^|boolean|否|是|设置弹窗是否响应悬停态，适用于折叠屏等支持悬停模式的设备。 - true：弹窗响应悬停态，在折叠屏悬停模式下会自适应调整布局区域，提供更好的多任务体验。 - false：弹窗不响应悬停态，在悬停模式下保持默认布局。 默认值：false **元服务API：** 从API version 14开始，该接口支持在元服务中使用。| |hoverModeArea^14+^|[HoverModeAreaType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition#hovermodeareatype14)|否|是|设置悬停态下弹窗的默认展示区域，仅在enableHoverMode为true时生效。不同的区域值对应弹窗在折叠屏悬停模式下的不同布局位置（如BOTTOM_SCREEN表示弹窗展示在下半屏区域，TOP_SCREEN表示弹窗展示在上半屏区域）。 默认值：HoverModeAreaType.BOTTOM_SCREEN **元服务API：** 从API version 14开始，该接口支持在元服务中使用。| |markToday^19+^|boolean|否|是|设置日历选择器弹窗中系统当前日期是否保持高亮显示。 - true：系统当前日期在日历选择器弹窗内保持高亮显示。 - false：系统当前日期在日历选择器弹窗内不保持高亮显示。 默认值：false **元服务API：** 从API version 19开始，该接口支持在元服务中使用。| |systemMaterial|[SystemUiMaterial](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect#systemuimaterial)|否|是|设置弹窗的系统材质。 **说明：** - 默认值：[ImmersiveOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uimaterial#immersiveoptions)的style为ImmersiveStyle.ULTRA_THICK的[ImmersiveMaterial](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uimaterial#immersivematerial)对象。设置undefined时与默认值保持一致。 - 不同的材质具有不同的视觉效果，包括背景透明度、模糊程度、阴影样式等方面的差异，该接口影响背景色[backgroundColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundcolor)、背景模糊[backgroundBlurStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundblurstyle9)、背景效果[backgroundEffect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-background#backgroundeffect11)、边框颜色[borderColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border#bordercolor)、边框宽度[borderWidth](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border#borderwidth)、阴影[shadow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect#shadow)，当设置系统材质时，上述接口不生效。 **起始版本：** 26.0.0 **模型约束：** 此接口仅可在Stage模型下使用。 **元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。| > 说明 > > 在应用窗口缩小过程中，弹窗的宽度会被不断压缩，当缩小到一定程度时会导致其内容无法完整显示，保证CalendarPickerDialog内容能够完整显示的最小窗口宽度为386vp。 ## 示例 ### 示例1（设置弹窗背板） 该示例通过[CalendarDialogOptions](#calendardialogoptions对象说明)的backgroundColor、backgroundBlurStyle、shadow设置日历选择器弹窗背板。 ```ts // xxx.ets @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2024-03-24'); build() { Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { console.info('CalendarDialog.show'); CalendarPickerDialog.show({ selected: this.selectedDate, backgroundColor: Color.Gray, backgroundBlurStyle: BlurStyle.NONE, shadow: ShadowStyle.OUTER_FLOATING_SM, onAccept: (value) => { // 点击弹窗中的"确定"按钮时触发该回调，value表示选中的日期值。 this.selectedDate = value; console.info('calendar onAccept:' + JSON.stringify(value)); }, onCancel: () => { // 点击弹窗中的"取消"按钮时触发该回调。 console.info('calendar onCancel'); }, onChange: (value) => { // 选择弹窗中日期使当前选中项改变时触发该回调，value表示选中的日期值。 console.info('calendar onChange:' + JSON.stringify(value)); }, onDidAppear: () => { console.info('calendar onDidAppear'); }, onDidDisappear: () => { console.info('calendar onDidDisappear'); }, onWillAppear: () => { console.info('calendar onWillAppear'); }, onWillDisappear: () => { console.info('calendar onWillDisappear'); } }); }) }.width('100%') } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/73/v3/eGH9jyPwRJKkZTjnATRAoA/zh-cn_image_0000002717773004.gif?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=37E5E68F74F8781F864A442C1E382ADDFB38BA413EEDF69C7B84E09FCF1541C8) ### 示例2（自定义按钮样式） 从API version 12开始，该示例通过配置[CalendarDialogOptions](#calendardialogoptions对象说明)的acceptButtonStyle、cancelButtonStyle实现自定义日历选择器弹窗按钮样式。 ```ts // xxx.ets @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date(); build() { Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { console.info('CalendarDialog.show'); CalendarPickerDialog.show({ selected: this.selectedDate, acceptButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: 'rgb(81, 81, 216)', fontSize: '26fp', fontWeight: FontWeight.Bolder, fontStyle: FontStyle.Normal, fontFamily: 'sans-serif', backgroundColor: '#A6ACAF', borderRadius: 20 }, cancelButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Blue, fontSize: '16fp', fontWeight: FontWeight.Normal, fontStyle: FontStyle.Italic, fontFamily: 'sans-serif', backgroundColor: '#50182431', borderRadius: 10 }, onAccept: (value) => { this.selectedDate = value; console.info('calendar onAccept:' + JSON.stringify(value)); } }); }) }.width('100%') } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ec/v3/4XObx4TrRO6eV3ylt6758w/zh-cn_image_0000002717613072.png?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=918E7E767AFB309C7D26727C3249CC9C09A05C84776749EEC0363C6785FA37C9) ### 示例3（悬停态弹窗） 从API version 14开始，该示例展示了在折叠屏悬停态下设置dialog布局区域的效果。 ```ts @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2024-04-23'); build() { Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { console.info('CalendarDialog.show'); CalendarPickerDialog.show({ selected: this.selectedDate, onAccept: (value) => { console.info('calendar onAccept:' + JSON.stringify(value)); }, onCancel: () => { console.info('calendar onCancel'); }, onChange: (value) => { console.info('calendar onChange:' + JSON.stringify(value)); }, onDidAppear: () => { console.info('calendar onDidAppear'); }, onDidDisappear: () => { console.info('calendar onDidDisappear'); }, onWillAppear: () => { console.info('calendar onWillAppear'); }, onWillDisappear: () => { console.info('calendar onWillDisappear'); }, enableHoverMode: true, hoverModeArea: HoverModeAreaType.TOP_SCREEN, }); }) }.width('100%') } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cc/v3/VLlmLdgRShO5qzSjqEkIBg/zh-cn_image_0000002747293025.gif?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=E1E33004D28E4633E029081984E0703F3B4661BE231A72358FEBA057CE820948) ### 示例4（设置日期选中态底板样式） 从API version 10开始，该示例通过[CalendarOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-calendarpicker#calendaroptions对象说明)的hintRadius设置日期选中态底板样式。 ```ts // xxx.ets @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2024-04-23'); build() { Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { console.info('CalendarDialog.show'); CalendarPickerDialog.show({ selected: this.selectedDate, hintRadius: 1, onAccept: (value) => { // 点击弹窗中的"确定"按钮时触发该回调，value表示选中的日期值。 this.selectedDate = value; console.info('calendar onAccept:' + JSON.stringify(value)); } }); }) }.width('100%') } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/30/v3/ObGwh2D2SY6U8F8biiCHtg/zh-cn_image_0000002747212941.png?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=76DFAC03F4918FA3AF3EACE884864DFBA573A1105EAAAA7931CD5035E17B74E2) ### 示例5（设置开始日期和结束日期） 从API version 18开始，该示例通过[CalendarOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-calendarpicker#calendaroptions对象说明)的start和end设置日历选择器弹窗的开始日期和结束日期。 ```ts // xxx.ets @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2025-01-01'); private startDate: Date = new Date('2024-01-10'); private endDate: Date = new Date('2025-01-10'); build() { Column() { Text('月历日期选择器').fontSize(30) Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { console.info('CalendarDialog.show'); CalendarPickerDialog.show({ start: this.startDate, end: this.endDate, selected: this.selectedDate, }); }) }.width('100%').margin({ top: 350 }) } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ba/v3/mXoodyY8QSeIPX6f9eBi-w/zh-cn_image_0000002717773006.gif?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=490310174499304C2D1281E727A76F69803E71CCB1F19EBD1BFDEBC9D4502A79) ### 示例6（设置系统当前日期在日历选择器弹窗内保持高亮显示，并设置禁用日期区间） 从API version 19开始，该示例通过配置[CalendarDialogOptions](#calendardialogoptions对象说明)的markToday，使系统当前日期在日历选择器弹窗内保持高亮显示，并通过配置[CalendarOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-calendarpicker#calendaroptions对象说明)的disabledDateRange设置禁用的日期区间。 ```ts // xxx.ets @Entry @Component struct CalendarPickerDialogExample { private disabledDateRange: DateRange[] = [ { start: new Date('2025-01-01'), end: new Date('2025-01-02') }, { start: new Date('2025-01-09'), end: new Date('2025-01-10') }, { start: new Date('2025-01-15'), end: new Date('2025-01-16') }, { start: new Date('2025-01-19'), end: new Date('2025-01-19') }, { start: new Date('2025-01-22'), end: new Date('2025-01-25') } ]; build() { Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { console.info('CalendarDialog.show'); CalendarPickerDialog.show({ markToday: true, disabledDateRange: this.disabledDateRange }); }) }.width('100%').margin({ top: 350 }) } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7f/v3/59JEjV8jSdaMeP0gkLYnjw/zh-cn_image_0000002717613074.gif?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=F2CF62BF0D577F27623EA91948CA5398046C50A33BB6569E41DC675E3D189B95) ### 示例7（自定义背景模糊效果参数） 从API version 19开始，该示例通过配置[backgroundBlurStyleOptions](#calendardialogoptions对象说明)，实现自定义背景模糊效果。 ```ts @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2025-08-05'); build() { Stack({ alignContent: Alignment.Top }) { // $r('app.media.bg')需要替换为开发者所需的图像资源文件。 Image($r('app.media.bg')) Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { CalendarPickerDialog.show({ selected: this.selectedDate, hintRadius: 1, backgroundColor: undefined, backgroundBlurStyle: BlurStyle.Thin, backgroundBlurStyleOptions: { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.AVERAGE, scale: 1, blurOptions: { grayscale: [20, 20] }, }, }); }) }.width('100%') } } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f/v3/O5oJGBa5ROGK9MUDvJ0Brg/zh-cn_image_0000002747293027.png?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=B6F90E5DF9891EFC343DCD79E9E8CCBC2A04A4C27E6A8CC5F4AC306EDAF7501B) ### 示例8（自定义背景效果参数） 从API version 19开始，该示例通过配置[backgroundEffect](#calendardialogoptions对象说明)，实现自定义背景效果。 ```ts @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2025-08-05'); build() { Stack({ alignContent: Alignment.Top }) { // $r('app.media.bg')需要替换为开发者所需的图像资源文件。 Image($r('app.media.bg')) Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { CalendarPickerDialog.show({ selected: this.selectedDate, hintRadius: 1, backgroundColor: undefined, backgroundBlurStyle: BlurStyle.Thin, backgroundEffect: { radius: 60, saturation: 0, brightness: 1, color: Color.White, blurOptions: { grayscale: [20, 20] } }, }); }) }.width('100%') } } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/48/v3/Zcev2vXHQmeLZ2dwcH8xPw/zh-cn_image_0000002747212943.png?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=7FCFBE333344D5C03E04EAF33FBCB65D4570131F31A37E0EE618D39C4AF6C506) ### 示例9（设置系统材质） 该示例通过配置[systemMaterial](#calendardialogoptions对象说明)，实现系统材质效果。 从API版本26.0.0开始，在CalendarDialogOptions中新增了systemMaterial属性。 ```ts import { uiMaterial } from '@kit.ArkUI'; @Entry @Component struct CalendarPickerDialogExample { private selectedDate: Date = new Date('2025-08-05'); build() { Stack({ alignContent: Alignment.Top }) { Column() { Button('Show CalendarPicker Dialog') .margin(20) .onClick(() => { CalendarPickerDialog.show({ selected: this.selectedDate, systemMaterial: new uiMaterial.ImmersiveMaterial({ style: uiMaterial.ImmersiveStyle.ULTRA_THICK }) }); }) }.width('100%') } } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cd/v3/yyo_dVXlRQuia01C44C3dw/zh-cn_image_0000002717773008.png?HW-CC-KV=V1&HW-CC-Date=20260909T182645Z&HW-CC-Expire=31536000000&HW-CC-Sign=9F60E496727EF18BF7612E4E2396D496E3B89F3C58F1570AA80F41647F7B4DBF)