1# 日历选择器弹窗 (CalendarPickerDialog) 2 3点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../js-apis-arkui-UIContext.md#uicontext)说明。 10 11## CalendarPickerDialog 12 13### show 14 15static show(options?: CalendarDialogOptions) 16 17定义日历选择器弹窗并弹出。 18 19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| ------- | ------------------------------------------------------- | ---- | -------------------------- | 27| options | [CalendarDialogOptions](#calendardialogoptions对象说明) | 否 | 配置日历选择器弹窗的参数。 | 28 29## CalendarDialogOptions对象说明 30 31继承自[CalendarOptions](ts-basic-components-calendarpicker.md#calendaroptions对象说明)。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35| 名称 | 类型 | 必填 | 说明 | 36| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 37| onAccept | [Callback](ts-types.md#callback12)\<Date> | 否 | 点击弹窗中的“确定”按钮时触发该回调。<br/>返回选中的日期值。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| onCancel | [VoidCallback](ts-types.md#voidcallback12) | 否 | 点击弹窗中的“取消”按钮时触发该回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 39| onChange | [Callback](ts-types.md#callback12)\<Date> | 否 | 选择弹窗中日期使当前选中项改变时触发该回调。<br/>返回选中的日期值。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent<br/>**说明：** <br/>当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 41| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 弹窗背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK<br/>**说明：** <br/>设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 42| acceptButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12类型说明) | 否 | 设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。<br />**说明：**<br />acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 43| cancelButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12类型说明) | 否 | 设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。<br />**说明：**<br />acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 44| onDidAppear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | 否 | 弹窗弹出时的事件回调。<br />**说明：**<br />1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。<br />2.在onDidAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。<br />3.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。<br />4. 当弹窗入场动效未完成时关闭弹窗，该回调不会触发。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 45| onDidDisappear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | 否 | 弹窗消失时的事件回调。<br />**说明：**<br />1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 46| onWillAppear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | 否 | 弹窗显示动效前的事件回调。<br />**说明：**<br />1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。<br />2.在onWillAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 47| onWillDisappear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | 否 | 弹窗退出动效前的事件回调。<br />**说明：**<br />1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。<br />2.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 48| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明) | 否 | 设置弹窗背板的阴影。<br /> 当设备为2in1时，默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD，失焦为ShadowStyle.OUTER_FLOATING_SM <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 49| enableHoverMode<sup>14+</sup> | boolean | 否 | 是否响应悬停态。<br />默认值：false，默认不响应。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 50| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | 否 | 悬停态下弹窗默认展示区域。<br />默认值：HoverModeAreaType.BOTTOM_SCREEN。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 51 52> **说明：** 53> 54> 在应用窗口缩小过程中，弹窗的宽度会被不断压缩，当缩小到一定程度时会导致其内容无法完整显示，保证CalendarPickerDialog内容能够完整显示的最小窗口宽度为386vp。 55 56## 示例 57 58### 示例1（弹出日历选择弹窗） 59 60该示例通过点击按钮弹出日历选择弹窗。 61 62```ts 63// xxx.ets 64@Entry 65@Component 66struct CalendarPickerDialogExample { 67 private selectedDate: Date = new Date('2024-04-23') 68 69 build() { 70 Column() { 71 Button("Show CalendarPicker Dialog") 72 .margin(20) 73 .onClick(() => { 74 console.info("CalendarDialog.show") 75 CalendarPickerDialog.show({ 76 selected: this.selectedDate, 77 onAccept: (value) => { 78 console.info("calendar onAccept:" + JSON.stringify(value)) 79 }, 80 onCancel: () => { 81 console.info("calendar onCancel") 82 }, 83 onChange: (value) => { 84 console.info("calendar onChange:" + JSON.stringify(value)) 85 }, 86 onDidAppear: () => { 87 console.info("calendar onDidAppear") 88 }, 89 onDidDisappear: () => { 90 console.info("calendar onDidDisappear") 91 }, 92 onWillAppear: () => { 93 console.info("calendar onWillAppear") 94 }, 95 onWillDisappear: () => { 96 console.info("calendar onWillDisappear") 97 } 98 }) 99 }) 100 }.width('100%') 101 } 102} 103``` 104 105 106 107### 示例2（自定义按钮样式） 108 109该示例通过配置 acceptButtonStyle、cancelButtonStyle实现自定义按钮样式。 110 111```ts 112// xxx.ets 113@Entry 114@Component 115struct CalendarPickerDialogExample { 116 private selectedDate: Date = new Date() 117 build() { 118 Column() { 119 Button("Show CalendarPicker Dialog") 120 .margin(20) 121 .onClick(() => { 122 console.info("CalendarDialog.show") 123 CalendarPickerDialog.show({ 124 selected: this.selectedDate, 125 acceptButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Red, 126 fontSize: '26fp', fontWeight: FontWeight.Bolder, fontStyle: FontStyle.Normal, fontFamily: 'sans-serif', backgroundColor:'#80834511', 127 borderRadius: 20 }, 128 cancelButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Blue, 129 fontSize: '16fp', fontWeight: FontWeight.Normal, fontStyle: FontStyle.Italic, fontFamily: 'sans-serif', backgroundColor:'#50182431', 130 borderRadius: 10 }, 131 onAccept: (value) => { 132 console.info("calendar onAccept:" + JSON.stringify(value)) 133 }, 134 onCancel: () => { 135 console.info("calendar onCancel") 136 }, 137 onChange: (value) => { 138 console.info("calendar onChange:" + JSON.stringify(value)) 139 }, 140 onDidAppear: () => { 141 console.info("calendar onDidAppear") 142 }, 143 onDidDisappear: () => { 144 console.info("calendar onDidDisappear") 145 }, 146 onWillAppear: () => { 147 console.info("calendar onWillAppear") 148 }, 149 onWillDisappear: () => { 150 console.info("calendar onWillDisappear") 151 } 152 }) 153 }) 154 }.width('100%') 155 } 156} 157``` 158 159 160 161### 示例3（悬停态弹窗） 162 163该示例展示了在折叠屏悬停态下设置dialog布局区域的效果。 164 165```ts 166@Entry 167@Component 168struct CalendarPickerDialogExample { 169 private selectedDate: Date = new Date('2024-04-23'); 170 171 build() { 172 Column() { 173 Button("Show CalendarPicker Dialog") 174 .margin(20) 175 .onClick(() => { 176 console.info("CalendarDialog.show") 177 CalendarPickerDialog.show({ 178 selected: this.selectedDate, 179 onAccept: (value) => { 180 console.info("calendar onAccept:" + JSON.stringify(value)) 181 }, 182 onCancel: () => { 183 console.info("calendar onCancel") 184 }, 185 onChange: (value) => { 186 console.info("calendar onChange:" + JSON.stringify(value)) 187 }, 188 onDidAppear: () => { 189 console.info("calendar onDidAppear") 190 }, 191 onDidDisappear: () => { 192 console.info("calendar onDidDisappear") 193 }, 194 onWillAppear: () => { 195 console.info("calendar onWillAppear") 196 }, 197 onWillDisappear: () => { 198 console.info("calendar onWillDisappear") 199 }, 200 enableHoverMode: true, 201 hoverModeArea: HoverModeAreaType.TOP_SCREEN, 202 }) 203 }) 204 }.width('100%') 205 } 206} 207``` 208 209
