1# Calendar Picker Dialog Box (CalendarPickerDialog) 2 3A calendar picker dialog box is a dialog box that allows users to select a date from a calendar picker. 4 5> **NOTE** 6> 7> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../js-apis-arkui-UIContext.md#uicontext). 10 11## CalendarPickerDialog.show 12 13static show(options?: CalendarDialogOptions) 14 15Shows a calendar picker dialog box. 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory| Description | 24| ------- | ------------------------------------------------------- | ---- | -------------------------- | 25| options | [CalendarDialogOptions](#calendardialogoptions) | No | Parameters of the calendar picker dialog box.| 26 27## CalendarDialogOptions 28 29Inherited from [CalendarOptions](ts-basic-components-calendarpicker.md#calendaroptions). 30 31**System capability**: SystemCapability.ArkUI.ArkUI.Full 32 33| Name | Type | Mandatory| Description | 34| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 35| onAccept | (value: Date) => void | No | Triggered when the OK button in the dialog box is clicked.<br>**value**: selected date value<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 36| onCancel | () => void | No | Triggered when the Cancel button in the dialog box is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 37| onChange | (value: Date) => void | No | Triggered when the selection in the picker changes the selected date.<br>**value**: selected date value<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 38| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Backplane color of the dialog box.<br>Default value: **Color.Transparent**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 39| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the dialog box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 40| acceptButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12) | No| Style of the accept button.<br>**NOTE**<br>In the **acceptButtonStyle** and **cancelButtonStyle** configurations, only one **primary** field can be set to **true** at most. If both the **primary** fields are set to **true**, neither will take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 41| cancelButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12) | No| Style of the cancel button.<br>**NOTE**<br>In the **acceptButtonStyle** and **cancelButtonStyle** configurations, only one **primary** field can be set to **true** at most. If both the **primary** fields are set to **true**, neither will take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 42| onDidAppear<sup>12+</sup> | () => void | No| Event callback when the dialog box appears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onDidAppear**. The settings take effect next time the dialog box appears.<br>3. If the user dismisses the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.<br>4. If the dialog box is dismissed before its entrance animation is finished, this callback is not invoked.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 43| onDidDisappear<sup>12+</sup> | () => void | No| Event callback when the dialog box disappears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 44| onWillAppear<sup>12+</sup> | () => void | No| Event callback when the dialog box is about to appear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onWillAppear**. The settings take effect next time the dialog box appears.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 45| onWillDisappear<sup>12+</sup> | () => void | No| Event callback when the dialog box is about to disappear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.<br>2. If the user closes the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 46| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Shadow of the dialog box.<br> Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 47 48## Example 49 50### Example 1 51 52This example shows the basic usage of **CalendarPickerDialog**. 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct CalendarPickerDialogExample { 59 private selectedDate: Date = new Date('2024-04-23') 60 61 build() { 62 Column() { 63 Button("Show CalendarPicker Dialog") 64 .margin(20) 65 .onClick(() => { 66 console.info("CalendarDialog.show") 67 CalendarPickerDialog.show({ 68 selected: this.selectedDate, 69 onAccept: (value) => { 70 console.info("calendar onAccept:" + JSON.stringify(value)) 71 }, 72 onCancel: () => { 73 console.info("calendar onCancel") 74 }, 75 onChange: (value) => { 76 console.info("calendar onChange:" + JSON.stringify(value)) 77 }, 78 onDidAppear: () => { 79 console.info("calendar onDidAppear") 80 }, 81 onDidDisappear: () => { 82 console.info("calendar onDidDisappear") 83 }, 84 onWillAppear: () => { 85 console.info("calendar onWillAppear") 86 }, 87 onWillDisappear: () => { 88 console.info("calendar onWillDisappear") 89 } 90 }) 91 }) 92 }.width('100%') 93 } 94} 95``` 96 97 98 99### Example 2 100 101This example shows how to customize the button style. 102 103```ts 104// xxx.ets 105@Entry 106@Component 107struct CalendarPickerDialogExample { 108 private selectedDate: Date = new Date() 109 build() { 110 Column() { 111 Button("Show CalendarPicker Dialog") 112 .margin(20) 113 .onClick(() => { 114 console.info("CalendarDialog.show") 115 CalendarPickerDialog.show({ 116 selected: this.selectedDate, 117 acceptButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Red, 118 fontSize: '26fp', fontWeight: FontWeight.Bolder, fontStyle: FontStyle.Normal, fontFamily: 'sans-serif', backgroundColor:'#80834511', 119 borderRadius: 20 }, 120 cancelButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Blue, 121 fontSize: '16fp', fontWeight: FontWeight.Normal, fontStyle: FontStyle.Italic, fontFamily: 'sans-serif', backgroundColor:'#50182431', 122 borderRadius: 10 }, 123 onAccept: (value) => { 124 console.info("calendar onAccept:" + JSON.stringify(value)) 125 }, 126 onCancel: () => { 127 console.info("calendar onCancel") 128 }, 129 onChange: (value) => { 130 console.info("calendar onChange:" + JSON.stringify(value)) 131 }, 132 onDidAppear: () => { 133 console.info("calendar onDidAppear") 134 }, 135 onDidDisappear: () => { 136 console.info("calendar onDidDisappear") 137 }, 138 onWillAppear: () => { 139 console.info("calendar onWillAppear") 140 }, 141 onWillDisappear: () => { 142 console.info("calendar onWillDisappear") 143 } 144 }) 145 }) 146 }.width('100%') 147 } 148} 149``` 150 151 152
