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](#calendardialogoptions)) 14 15Shows a calendar picker dialog box. 16 17## CalendarDialogOptions 18 19| Name | Type | Mandatory| Description | 20| ---------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 21| selected | Date | No | Selected date. Default value: current system date | 22| hintRadius | number \|[Resource](ts-types.md#resource) | No | Style of the background of the selected state.<br>Default value: The background is a circle.<br>**NOTE**<br>If the value is **0**, the background is a rectangle with square corners. If the value is in the 0–16 range, the background is a rectangle with rounded corners. If the value is equal to or greater than 16, the background is a circle.| 23| onAccept | (value: Date) => void | No | Triggered when the OK button in the dialog box is clicked.<br>**value**: selected date value| 24| onCancel | () => void | No | Triggered when the Cancel button in the dialog box is clicked. | 25| onChange | (value: Date) => void | No | Triggered when the selection in the picker changes the selected date.<br>**value**: selected date value| 26 27## Example 28 29```ts 30// xxx.ets 31@Entry 32@Component 33struct CalendarPickerDialogExample { 34 private selectedDate: Date = new Date() 35 build() { 36 Column() { 37 Button("Show CalendarPicker Dialog") 38 .margin(20) 39 .onClick(() => { 40 console.info("CalendarDialog.show") 41 CalendarPickerDialog.show({ 42 selected: this.selectedDate, 43 onAccept: (value) => { 44 console.info("calendar onAccept:" + JSON.stringify(value)) 45 }, 46 onCancel: () => { 47 console.info("calendar onCancel") 48 }, 49 onChange: (value) => { 50 console.info("calendar onChange:" + JSON.stringify(value)) 51 } 52 }) 53 }) 54 }.width('100%') 55 } 56} 57``` 58 59 60
