1# 日历选择器弹窗 (CalendarPickerDialog) 2 3点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../js-apis-arkui-UIContext.md#uicontext)说明。 10> 11> 该组件不支持在Wearable设备上使用。 12 13## CalendarPickerDialog 14 15### show 16 17static show(options?: CalendarDialogOptions) 18 19定义日历选择器弹窗并弹出。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------- | ------------------------------------------------------- | ---- | -------------------------- | 29| options | [CalendarDialogOptions](#calendardialogoptions对象说明) | 否 | 配置日历选择器弹窗的参数。 | 30 31## CalendarDialogOptions对象说明 32 33继承自[CalendarOptions](ts-basic-components-calendarpicker.md#calendaroptions对象说明)。 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37| 名称 | 类型 | 必填 | 说明 | 38| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 39| onAccept | [Callback](ts-types.md#callback12)\<Date> | 否 | 点击弹窗中的“确定”按钮时触发该回调。<br/>返回选中的日期值。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| onCancel | [VoidCallback](ts-types.md#voidcallback12) | 否 | 点击弹窗中的“取消”按钮时触发该回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 41| onChange | [Callback](ts-types.md#callback12)\<Date> | 否 | 选择弹窗中日期使当前选中项改变时触发该回调。<br/>返回选中的日期值。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent<br/>**说明：** <br/>当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 43| 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开始，该接口支持在原子化服务中使用。 | 44| 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开始，该接口支持在原子化服务中使用。| 45| 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开始，该接口支持在原子化服务中使用。| 46| 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开始，该接口支持在原子化服务中使用。 | 47| onDidDisappear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | 否 | 弹窗消失时的事件回调。<br />**说明：**<br />1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 48| 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开始，该接口支持在原子化服务中使用。| 49| 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开始，该接口支持在原子化服务中使用。| 50| 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开始，该接口支持在原子化服务中使用。| 51| enableHoverMode<sup>14+</sup> | boolean | 否 | 是否响应悬停态。<br />默认值：false，默认不响应。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 52| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | 否 | 悬停态下弹窗默认展示区域。<br />默认值：HoverModeAreaType.BOTTOM_SCREEN。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 53 54> **说明：** 55> 56> 在应用窗口缩小过程中，弹窗的宽度会被不断压缩，当缩小到一定程度时会导致其内容无法完整显示，保证CalendarPickerDialog内容能够完整显示的最小窗口宽度为386vp。 57 58## 示例 59 60### 示例1（设置弹窗背板） 61 62该示例通过backgroundColor、backgroundBlurStyle、shadow设置弹窗背板。 63 64```ts 65// xxx.ets 66@Entry 67@Component 68struct CalendarPickerDialogExample { 69 private selectedDate: Date = new Date('2024-04-23') 70 71 build() { 72 Column() { 73 Button("Show CalendarPicker Dialog") 74 .margin(20) 75 .onClick(() => { 76 console.info("CalendarDialog.show") 77 CalendarPickerDialog.show({ 78 selected: this.selectedDate, 79 backgroundColor: Color.Gray, 80 backgroundBlurStyle: BlurStyle.NONE, 81 shadow: ShadowStyle.OUTER_FLOATING_SM, 82 onAccept: (value) => { 83 this.selectedDate = value 84 console.info("calendar onAccept:" + JSON.stringify(value)) 85 }, 86 onCancel: () => { 87 console.info("calendar onCancel") 88 }, 89 onChange: (value) => { 90 console.info("calendar onChange:" + JSON.stringify(value)) 91 }, 92 onDidAppear: () => { 93 console.info("calendar onDidAppear") 94 }, 95 onDidDisappear: () => { 96 console.info("calendar onDidDisappear") 97 }, 98 onWillAppear: () => { 99 console.info("calendar onWillAppear") 100 }, 101 onWillDisappear: () => { 102 console.info("calendar onWillDisappear") 103 } 104 }) 105 }) 106 }.width('100%') 107 } 108} 109``` 110 111 112 113### 示例2（自定义按钮样式） 114 115该示例通过配置 acceptButtonStyle、cancelButtonStyle实现自定义按钮样式。 116 117```ts 118// xxx.ets 119@Entry 120@Component 121struct CalendarPickerDialogExample { 122 private selectedDate: Date = new Date() 123 124 build() { 125 Column() { 126 Button("Show CalendarPicker Dialog") 127 .margin(20) 128 .onClick(() => { 129 console.info("CalendarDialog.show") 130 CalendarPickerDialog.show({ 131 selected: this.selectedDate, 132 acceptButtonStyle: { 133 type: ButtonType.Normal, 134 style: ButtonStyleMode.NORMAL, 135 role: ButtonRole.NORMAL, 136 fontColor: 'rgb(81, 81, 216)', 137 fontSize: '26fp', 138 fontWeight: FontWeight.Bolder, 139 fontStyle: FontStyle.Normal, 140 fontFamily: 'sans-serif', 141 backgroundColor: '#A6ACAF', 142 borderRadius: 20 143 }, 144 cancelButtonStyle: { 145 type: ButtonType.Normal, 146 style: ButtonStyleMode.NORMAL, 147 role: ButtonRole.NORMAL, 148 fontColor: Color.Blue, 149 fontSize: '16fp', 150 fontWeight: FontWeight.Normal, 151 fontStyle: FontStyle.Italic, 152 fontFamily: 'sans-serif', 153 backgroundColor: '#50182431', 154 borderRadius: 10 155 }, 156 onAccept: (value) => { 157 this.selectedDate = value 158 console.info("calendar onAccept:" + JSON.stringify(value)) 159 } 160 }) 161 }) 162 }.width('100%') 163 } 164} 165``` 166 167 168 169### 示例3（悬停态弹窗） 170 171该示例展示了在折叠屏悬停态下设置dialog布局区域的效果。 172 173```ts 174@Entry 175@Component 176struct CalendarPickerDialogExample { 177 private selectedDate: Date = new Date('2024-04-23'); 178 179 build() { 180 Column() { 181 Button("Show CalendarPicker Dialog") 182 .margin(20) 183 .onClick(() => { 184 console.info("CalendarDialog.show") 185 CalendarPickerDialog.show({ 186 selected: this.selectedDate, 187 onAccept: (value) => { 188 console.info("calendar onAccept:" + JSON.stringify(value)) 189 }, 190 onCancel: () => { 191 console.info("calendar onCancel") 192 }, 193 onChange: (value) => { 194 console.info("calendar onChange:" + JSON.stringify(value)) 195 }, 196 onDidAppear: () => { 197 console.info("calendar onDidAppear") 198 }, 199 onDidDisappear: () => { 200 console.info("calendar onDidDisappear") 201 }, 202 onWillAppear: () => { 203 console.info("calendar onWillAppear") 204 }, 205 onWillDisappear: () => { 206 console.info("calendar onWillDisappear") 207 }, 208 enableHoverMode: true, 209 hoverModeArea: HoverModeAreaType.TOP_SCREEN, 210 }) 211 }) 212 }.width('100%') 213 } 214} 215``` 216 217 218 219### 示例4（设置日期选中态底板样式） 220 221该示例通过hintRadius设置日期选中态底板样式。 222 223```ts 224// xxx.ets 225@Entry 226@Component 227struct CalendarPickerDialogExample { 228 private selectedDate: Date = new Date('2024-04-23') 229 230 build() { 231 Column() { 232 Button("Show CalendarPicker Dialog") 233 .margin(20) 234 .onClick(() => { 235 console.info("CalendarDialog.show") 236 CalendarPickerDialog.show({ 237 selected: this.selectedDate, 238 hintRadius: 1, 239 onAccept: (value) => { 240 this.selectedDate = value 241 console.info("calendar onAccept:" + JSON.stringify(value)) 242 } 243 }) 244 }) 245 }.width('100%') 246 } 247} 248``` 249 250 251 252### 示例5（设置开始日期和结束日期） 253 254该示例通过start和end设置日历选择器弹窗的开始日期和结束日期。 255 256```ts 257// xxx.ets 258@Entry 259@Component 260struct CalendarPickerDialogExample { 261 private selectedDate: Date = new Date('2025-01-01') 262 private startDate: Date = new Date('2024-01-10') 263 private endDate: Date = new Date('2025-1-10') 264 265 build() { 266 Column() { 267 Text('月历日期选择器').fontSize(30) 268 Button("Show CalendarPicker Dialog") 269 .margin(20) 270 .onClick(() => { 271 console.info("CalendarDialog.show") 272 CalendarPickerDialog.show({ 273 start: this.startDate, 274 end: this.endDate, 275 selected: this.selectedDate, 276 }) 277 }) 278 }.width('100%').margin({ top: 350 }) 279 } 280} 281``` 282 283
