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](#calendardialogoptions)) 14 15定义日历选择器弹窗并弹出。 16 17## CalendarDialogOptions 18 19| 参数名 | 参数类型 | 必填 | 参数描述 | 20| ---------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 21| selected | Date | 否 | 设置当前选中的日期。 默认值：当前系统日期 | 22| hintRadius | number \|[Resource](ts-types.md#resource) | 否 | 描述日期选中态底板样式。<br/>默认值：底板样式为圆形。<br />**说明：**<br />hintRadius为0，底板样式为直角矩形。hintRadius为0 ~ 16，底板样式为圆角矩形。hintRadius>=16，底板样式为圆形 | 23| onAccept | (value: Date) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。<br/>value：选中的日期值 | 24| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | 25| onChange | (value: Date) => void | 否 | 选择弹窗中日期使当前选中项改变时触发该回调。<br/>value：选中的日期值 | 26 27## 示例 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
