1# CalendarPicker 2 3日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14## 接口 15 16CalendarPicker(options?: CalendarOptions) 17 18日历选择器。 19 20**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 21 22**系统能力：** SystemCapability.ArkUI.ArkUI.Full 23 24**参数：** 25 26| 参数名 | 类型 | 必填 | 说明 | 27| ------- | ------------------------------------------- | ---- | -------------------------- | 28| options | [CalendarOptions](#calendaroptions对象说明) | 否 | 配置日历选择器组件的参数。 | 29 30## 属性 31 32除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 33 34### edgeAlign 35 36edgeAlign(alignType: CalendarAlign, offset?: Offset) 37 38设置选择器与入口组件的对齐方式。 39 40**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44**参数：** 45 46| 参数名 | 类型 | 必填 | 说明 | 47| --------- | --------------------------------------- | ---- | ------------------------------------------------------------ | 48| alignType | [CalendarAlign](#calendaralign枚举说明) | 是 | 对齐方式类型。<br/>默认值：CalendarAlign .END | 49| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，选择器相对入口组件的偏移量。<br/>默认值：{dx: 0, dy: 0} | 50 51### textStyle 52 53textStyle(value: PickerTextStyle) 54 55入口区的文本颜色、字号、字体粗细。 56 57**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 58 59**系统能力：** SystemCapability.ArkUI.ArkUI.Full 60 61**参数：** 62 63| 参数名 | 类型 | 必填 | 说明 | 64| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 65| value | [PickerTextStyle](./ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 设置入口区的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 66 67## 事件 68 69除支持[通用事件](ts-universal-events-click.md)，还支持以下事件： 70 71### onChange 72 73onChange(callback: Callback\<Date>) 74 75选择日期时触发该事件。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| -------- | ----------------------------------------- | ---- | -------------- | 85| callback | [Callback](ts-types.md#callback12)\<Date> | 是 | 选中的日期值。 | 86 87## CalendarOptions对象说明 88 89**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93| 名称 | 类型 | 必填 | 说明 | 94| ----------- | ---------- | ------| --------------------------------- | 95| hintRadius | number \| [Resource](ts-types.md#resource) | 否 | 描述日期选中态底板样式。<br/>默认值：底板样式为圆形。<br />**说明：**<br />hintRadius为0，底板样式为直角矩形。hintRadius为0 ~ 16，底板样式为圆角矩形。hintRadius>=16，底板样式为圆形 | 96| selected | Date | 否 | 设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。<br/>默认值：当前系统日期。 | 97 98## CalendarAlign枚举说明 99 100**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104| 名称 | 描述 | 105| ------ | ------------------------ | 106| START | 设置选择器与入口组件左对齐的对齐方式。 | 107| CENTER | 设置选择器与入口组件居中对齐的对齐方式。 | 108| END | 设置选择器与入口组件右对齐的对齐方式。 | 109 110## 示例 111 112该示例实现了日历选择器组件，提供下拉日历弹窗。 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('月历日期选择器').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
