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**Atomic service API**: This API can be used in atomic services since API version 11. 21 22**System capability**: SystemCapability.ArkUI.ArkUI.Full 23 24**Parameters** 25 26| Name | Type | Mandatory| Description | 27| ------- | ------------------------------------------- | ---- | -------------------------- | 28| options | [CalendarOptions](#calendaroptions) | No | Parameters of the calendar picker.| 29 30## Attributes 31 32In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 33 34### edgeAlign 35 36edgeAlign(alignType: CalendarAlign, offset?: Offset) 37 38How the picker is aligned with the entry component. 39 40**Atomic service API**: This API can be used in atomic services since API version 11. 41 42**System capability**: SystemCapability.ArkUI.ArkUI.Full 43 44**Parameters** 45 46| Name | Type | Mandatory| Description | 47| --------- | --------------------------------------- | ---- | ------------------------------------------------------------ | 48| alignType | [CalendarAlign](#calendaralign) | Yes | Alignment type.<br>Default value: **CalendarAlign.END** | 49| offset | [Offset](ts-types.md#offset) | No | Offset of the picker relative to the entry component after alignment based on the specified alignment type.<br>Default value: **{dx: 0, dy: 0}**| 50 51### textStyle 52 53textStyle(value: PickerTextStyle) 54 55Sets the font color, font size, and font weight in the entry area. 56 57**Atomic service API**: This API can be used in atomic services since API version 11. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61**Parameters** 62 63| Name| Type | Mandatory| Description | 64| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 65| value | [PickerTextStyle](./ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight in the entry area.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} | 66 67## Events 68 69In addition to the [universal events](ts-component-general-events.md), the following events are supported. 70 71### onChange 72 73onChange(callback: Callback\<Date>) 74 75Triggered when a date is selected. 76 77**Atomic service API**: This API can be used in atomic services since API version 11. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81**Parameters** 82 83| Name| Type| Mandatory| Description | 84| ------ | ---- | ---- | -------------- | 85| callback | [Callback](ts-types.md#callback12)\<Date> | Yes | Selected date value| 86 87## CalendarOptions 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93| Name | Type | Mandatory | Description | 94| ----------- | ---------- | ------| --------------------------------- | 95| 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 greater than or equal to 16, the background is a circle.| 96| 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| 97 98## CalendarAlign 99 100**Atomic service API**: This API can be used in atomic services since API version 11. 101 102**System capability**: SystemCapability.ArkUI.ArkUI.Full 103 104| Name | Description | 105| ------ | ------------------------ | 106| START | The picker is left aligned with the entry component. | 107| CENTER | The picker is center aligned with the entry component.| 108| END | The picker is right aligned with the entry component. | 109 110## Example 111 112This example shows how to implement a calendar picker component. 113 114```ts 115// xxx.ets 116@Entry 117@Component 118struct CalendarPickerExample { 119 private selectedDate: Date = new Date('2024-03-05') 120 121 build() { 122 Column() { 123 Text('Calendar date picker').fontSize(30) 124 Column() { 125 CalendarPicker({ hintRadius: 10, selected: this.selectedDate }) 126 .edgeAlign(CalendarAlign.END) 127 .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } }) 128 .margin(10) 129 .onChange((value) => { 130 console.info("CalendarPicker onChange:" + JSON.stringify(value)) 131 }) 132 }.alignItems(HorizontalAlign.End).width("100%") 133 }.width('100%').margin({ top: 350 }) 134 } 135} 136``` 137 138 139
