1# 日历选择器弹窗 2 3点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)说明。 10 11## CalendarPickerDialog.show 12 13show(options?: CalendarDialogOptions) 14 15定义日历选择器弹窗并弹出。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------- | ------------------------------------------------------- | ---- | -------------------------- | 23| options | [CalendarDialogOptions](#calendardialogoptions对象说明) | 否 | 配置日历选择器弹窗的参数。 | 24 25## CalendarDialogOptions对象说明 26 27继承自[CalendarOptions](ts-basic-components-calendarpicker.md#calendaroptions对象说明)。 28 29| 名称 | 类型 | 必填 | 描述 | 30| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 31| onAccept | (value: Date) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。<br/>value：选中的日期值。 | 32| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | 33| onChange | (value: Date) => void | 否 | 选择弹窗中日期使当前选中项改变时触发该回调。<br/>value：选中的日期值。 | 34 35## 示例 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
