1# CalendarPicker 2 3The **\<CalendarPicker>** component provides a drop-down calendar for users to select a date. 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 10## Child Components 11 12Not supported 13 14## APIs 15 16CalendarPicker(options?: CalendarOptions) 17 18Creates a calendar picker. 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22**Parameters** 23 24| Name | Type | Mandatory| Description | 25| ------- | ------------------------------------------- | ---- | -------------------------- | 26| options | [CalendarOptions](#calendaroptions) | No | Parameters of the calendar picker.| 27 28## Attributes 29 30In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 31 32| Name | Type | Description | 33| ----------- | ----------- | --------------------------------- | 34| edgeAlign | alignType: [CalendarAlign](#calendaralign), offset?: [Offset](ts-types.md#offset) | How the picker is aligned with the entry component.<br>- **alignType**: alignment type.<br>Default value: **CalendarAlign.END**<br>- **offset**: offset of the picker relative to the entry component after alignment based on the specified alignment type.<br>Default value: **{dx: 0, dy: 0}.**| 35| textStyle | [PickerTextStyle](./ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width in the entry area. | 36## Events 37 38In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 39 40| Name | Description | 41| ----------------------------------------- | ---------------------- | 42| onChange(callback: (value: Date) => void) | Triggered when a date is selected.<br>**value**: selected date value| 43 44## CalendarOptions 45 46| Name | Type | Mandatory | Description | 47| ----------- | ---------- | ------| --------------------------------- | 48| 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.| 49| selected | Date | No | Date of the selected item. If the value is not set or does not comply with the date format specifications, the default value will be used.<br>Default value: current system date| 50 51## CalendarAlign 52 53Since API version 9, this API is supported in ArkTS widgets. 54 55| Name | Description | 56| ------ | ------------------------ | 57| START | The picker is left aligned with the entry component. | 58| CENTER | The picker is center aligned with the entry component.| 59| END | The picker is right aligned with the entry component. | 60 61## Example 62 63```ts 64// xxx.ets 65@Entry 66@Component 67struct CalendarPickerExample { 68 private selectedDate: Date = new Date() 69 build() { 70 Column() { 71 Text('Calendar date picker').fontSize(30) 72 Column() { 73 CalendarPicker({ hintRadius: 10, selected: this.selectedDate }) 74 .edgeAlign(CalendarAlign.END) 75 .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } }) 76 .margin(10) 77 .onChange((value) => { 78 console.info("CalendarPicker onChange:" + JSON.stringify(value)) 79 }) 80 }.alignItems(HorizontalAlign.End).width("100%") 81 }.width('100%').margin({top:350}) 82 } 83} 84``` 85 86 87
