# Calendar Picker Dialog Box (CalendarPickerDialog)
A calendar picker dialog box is a dialog box that allows users to select a date from a calendar picker.
> **NOTE**
>
> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
>
> 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).
## CalendarPickerDialog.show
static show(options?: CalendarDialogOptions)
Shows a calendar picker dialog box.
**Atomic service API**: This API can be used in atomic services since API version 11.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------------------------------------------------------- | ---- | -------------------------- |
| options | [CalendarDialogOptions](#calendardialogoptions) | No | Parameters of the calendar picker dialog box.|
## CalendarDialogOptions
Inherited from [CalendarOptions](ts-basic-components-calendarpicker.md#calendaroptions).
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory| Description |
| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
| onAccept | (value: Date) => void | No | Triggered when the OK button in the dialog box is clicked.
**value**: selected date value
**Atomic service API**: This API can be used in atomic services since API version 11.|
| onCancel | () => void | No | Triggered when the Cancel button in the dialog box is clicked.
**Atomic service API**: This API can be used in atomic services since API version 11. |
| onChange | (value: Date) => void | No | Triggered when the selection in the picker changes the selected date.
**value**: selected date value
**Atomic service API**: This API can be used in atomic services since API version 11.|
| backgroundColor11+ | [ResourceColor](ts-types.md#resourcecolor) | No| Backplane color of the dialog box.
Default value: **Color.Transparent**
**Atomic service API**: This API can be used in atomic services since API version 12.|
| backgroundBlurStyle11+ | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the dialog box.
Default value: **BlurStyle.COMPONENT_ULTRA_THICK**
**Atomic service API**: This API can be used in atomic services since API version 12.|
| acceptButtonStyle12+ | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12) | No| Style of the accept button.
**NOTE**
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.
**Atomic service API**: This API can be used in atomic services since API version 12.|
| cancelButtonStyle12+ | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12) | No| Style of the cancel button.
**NOTE**
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.
**Atomic service API**: This API can be used in atomic services since API version 12.|
| onDidAppear12+ | () => void | No| Event callback when the dialog box appears.
**NOTE**
1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.
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.
3. If the user dismisses the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.
4. If the dialog box is dismissed before its entrance animation is finished, this callback is not invoked.
**Atomic service API**: This API can be used in atomic services since API version 12.|
| onDidDisappear12+ | () => void | No| Event callback when the dialog box disappears.
**NOTE**
1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.
**Atomic service API**: This API can be used in atomic services since API version 12.|
| onWillAppear12+ | () => void | No| Event callback when the dialog box is about to appear.
**NOTE**
1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.
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.
**Atomic service API**: This API can be used in atomic services since API version 12.|
| onWillDisappear12+ | () => void | No| Event callback when the dialog box is about to disappear.
**NOTE**
1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange) > onWillDisappear > onDidDisappear.
2. If the user closes the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.
**Atomic service API**: This API can be used in atomic services since API version 12.|
| shadow12+ | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Shadow of the dialog box.
Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise
**Atomic service API**: This API can be used in atomic services since API version 12.|
## Example
### Example 1
This example shows the basic usage of **CalendarPickerDialog**.
```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,
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")
}
})
})
}.width('100%')
}
}
```
### Example 2
This example shows how to customize the button style.
```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: Color.Red,
fontSize: '26fp', fontWeight: FontWeight.Bolder, fontStyle: FontStyle.Normal, fontFamily: 'sans-serif', backgroundColor:'#80834511',
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) => {
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")
}
})
})
}.width('100%')
}
}
```
