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-universal-attributes-size.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-universal-events-click.md), the following events are supported.
70
71### onChange
72
73onChange(callback: (value: Date) => void)
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| value  | 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 equal to or greater than 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| Name  | Description                    |
103| ------ | ------------------------ |
104| START  | The picker is left aligned with the entry component.  |
105| CENTER | The picker is center aligned with the entry component.|
106| END    | The picker is right aligned with the entry component.  |
107
108## Example
109
110```ts
111// xxx.ets
112@Entry
113@Component
114struct CalendarPickerExample {
115  private selectedDate: Date = new Date('2024-03-05')
116
117  build() {
118    Column() {
119      Text('Calendar date picker').fontSize(30)
120      Column() {
121        CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
122          .edgeAlign(CalendarAlign.END)
123          .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
124          .margin(10)
125          .onChange((value) => {
126            console.info("CalendarPicker onChange:" + JSON.stringify(value))
127          })
128      }.alignItems(HorizontalAlign.End).width("100%")
129    }.width('100%').margin({ top: 350 })
130  }
131}
132```
133
134![CalendarPicker](figures/CalendarPicker.gif)
135