1# 日历选择器弹窗 (CalendarPickerDialog) 2 3点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../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| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent。 | 35| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 否 | 弹窗背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK。 | 36 37## 示例 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct CalendarPickerDialogExample { 44 private selectedDate: Date = new Date() 45 build() { 46 Column() { 47 Button("Show CalendarPicker Dialog") 48 .margin(20) 49 .onClick(() => { 50 console.info("CalendarDialog.show") 51 CalendarPickerDialog.show({ 52 selected: this.selectedDate, 53 onAccept: (value) => { 54 console.info("calendar onAccept:" + JSON.stringify(value)) 55 }, 56 onCancel: () => { 57 console.info("calendar onCancel") 58 }, 59 onChange: (value) => { 60 console.info("calendar onChange:" + JSON.stringify(value)) 61 } 62 }) 63 }) 64 }.width('100%') 65 } 66} 67``` 68 69 70
