1# Calendar Picker Dialog Box 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](../apis/js-apis-arkui-UIContext.md#uicontext). 10 11## CalendarPickerDialog.show 12 13show(options?: CalendarDialogOptions) 14 15Shows a calendar picker dialog box. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name | Type | Mandatory| Description | 22| ------- | ------------------------------------------------------- | ---- | -------------------------- | 23| options | [CalendarDialogOptions](#calendardialogoptions) | No | Parameters of the calendar picker dialog box.| 24 25## CalendarDialogOptions 26 27Inherited from [CalendarOptions](ts-basic-components-calendarpicker.md#calendaroptions). 28 29| Name | Type | Mandatory| Description | 30| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 31| onAccept | (value: Date) => void | No | Triggered when the OK button in the dialog box is clicked.<br>**value**: selected date value| 32| onCancel | () => void | No | Triggered when the Cancel button in the dialog box is clicked. | 33| onChange | (value: Date) => void | No | Triggered when the selection in the picker changes the selected date.<br>**value**: selected date value| 34 35## Example 36 37```ts 38// xxx.ets 39@Entry 40@Component 41struct CalendarPickerDialogExample { 42 private selectedDate: Date = new Date() 43 build() { 44 Column() { 45 Button("Show CalendarPicker Dialog") 46 .margin(20) 47 .onClick(() => { 48 console.info("CalendarDialog.show") 49 CalendarPickerDialog.show({ 50 selected: this.selectedDate, 51 onAccept: (value) => { 52 console.info("calendar onAccept:" + JSON.stringify(value)) 53 }, 54 onCancel: () => { 55 console.info("calendar onCancel") 56 }, 57 onChange: (value) => { 58 console.info("calendar onChange:" + JSON.stringify(value)) 59 } 60 }) 61 }) 62 }.width('100%') 63 } 64} 65``` 66 67 68
