1# CalendarPicker 2 3日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 该组件不支持在Wearable设备上使用。 10 11 12## 子组件 13 14无 15 16## 接口 17 18CalendarPicker(options?: CalendarOptions) 19 20日历选择器。 21 22**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26**参数：** 27 28| 参数名 | 类型 | 必填 | 说明 | 29| ------- | ------------------------------------------- | ---- | -------------------------- | 30| options | [CalendarOptions](#calendaroptions对象说明) | 否 | 配置日历选择器组件的参数。 | 31 32## 属性 33 34除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 35 36### edgeAlign 37 38edgeAlign(alignType: CalendarAlign, offset?: Offset) 39 40设置选择器与入口组件的对齐方式。 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46**参数：** 47 48| 参数名 | 类型 | 必填 | 说明 | 49| --------- | --------------------------------------- | ---- | ------------------------------------------------------------ | 50| alignType | [CalendarAlign](#calendaralign枚举说明) | 是 | 对齐方式类型。<br/>默认值：CalendarAlign.END | 51| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，选择器相对入口组件的偏移量。<br/>默认值：{dx: 0, dy: 0} | 52 53### edgeAlign<sup>18+</sup> 54 55edgeAlign(alignType: Optional\<CalendarAlign>, offset?: Offset) 56 57设置选择器与入口组件的对齐方式。与[edgeAlign](#edgealign)相比，alignType参数新增了对undefined类型的支持。 58 59**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 67| alignType | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[CalendarAlign](#calendaralign枚举说明)> | 是 | 对齐方式类型。<br/>当alignType的值为undefined时，默认值：CalendarAlign.END | 68| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，选择器相对入口组件的偏移量。<br/>默认值：{dx: 0, dy: 0} | 69 70### textStyle 71 72textStyle(value: PickerTextStyle) 73 74入口区的文本颜色、字号、字体粗细。 75 76**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Full 79 80**参数：** 81 82| 参数名 | 类型 | 必填 | 说明 | 83| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 84| value | [PickerTextStyle](./ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 设置入口区的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 85 86### textStyle<sup>18+</sup> 87 88textStyle(style: Optional\<PickerTextStyle>) 89 90入口区的文本颜色、字号、字体粗细。与[textStyle](#textstyle)相比，style参数新增了对undefined类型的支持。 91 92**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96**参数：** 97 98| 参数名 | 类型 | 必填 | 说明 | 99| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 100| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](./ts-basic-components-datepicker.md#pickertextstyle10类型说明)> | 是 | 设置入口区的文本颜色、字号、字体粗细。<br/>当style的值为undefined时，默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 101 102## 事件 103 104除支持[通用事件](ts-component-general-events.md)，还支持以下事件： 105 106### onChange 107 108onChange(callback: Callback\<Date>) 109 110选择日期时触发该事件。 111 112**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116**参数：** 117 118| 参数名 | 类型 | 必填 | 说明 | 119| ------ | ---- | ---- | -------------- | 120| callback | [Callback](ts-types.md#callback12)\<Date> | 是 | 选中的日期值。 | 121 122### onChange<sup>18+</sup> 123 124onChange(callback: Optional\<Callback\<Date>>) 125 126选择日期时触发该事件。与[onChange](#onchange)相比，callback参数新增了对undefined类型的支持。 127 128**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132**参数：** 133 134| 参数名 | 类型 | 必填 | 说明 | 135| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 136| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Callback](ts-types.md#callback12)\<Date>> | 是 | 选中的日期值。<br>当callback的值为undefined时，不使用回调函数。 | 137 138## CalendarOptions对象说明 139 140**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 141 142**系统能力：** SystemCapability.ArkUI.ArkUI.Full 143 144| 名称 | 类型 | 必填 | 说明 | 145| ----------- | ---------- | ------| --------------------------------- | 146| hintRadius | number \| [Resource](ts-types.md#resource) | 否 | 描述日期选中态底板样式。<br />取值范围：[0, 16]<br />单位：vp<br/>默认值：底板样式为圆形。<br />**说明：**<br />当hintRadius为0时，底板样式为直角矩形。当hintRadius的值在0到16之间时，底板样式为圆角矩形。当hintRadius大于或等于16时，底板样式为圆形。 | 147| selected | Date | 否 | 设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。<br/>默认值：当前系统日期。 | 148| start<sup>18+</sup> | Date | 否 | 设置开始日期。 | 149| end<sup>18+</sup> | Date | 否 | 设置结束日期。 | 150 151**start和end设置规则：** 152 153| 场景 | 说明 | 154| -------- | ------------------------------------------------------------ | 155| start日期晚于end日期 | start日期、end日期都设置无效，选中日期为默认值 | 156| 选中日期早于start日期 | 选中日期为start日期 | 157| 选中日期晚于end日期 | 选中日期为end日期 | 158| start日期晚于当前系统日期，选中日期未设置 | 选中日期为start日期 | 159| end日期早于当前系统日期，选中日期未设置 | 选中日期为end日期 | 160| 日期格式不符合规范，如‘1999-13-32’ | start日期或end日期设置无效，选中日期取默认值 | 161 162## CalendarAlign枚举说明 163 164**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 165 166**系统能力：** SystemCapability.ArkUI.ArkUI.Full 167 168| 名称 | 描述 | 169| ------ | ------------------------ | 170| START | 设置选择器与入口组件左对齐的对齐方式。 | 171| CENTER | 设置选择器与入口组件居中对齐的对齐方式。 | 172| END | 设置选择器与入口组件右对齐的对齐方式。 | 173 174## 示例 175### 示例1（设置下拉日历弹窗） 176 177该示例实现了日历选择器组件，提供下拉日历弹窗。 178 179```ts 180// xxx.ets 181@Entry 182@Component 183struct CalendarPickerExample { 184 private selectedDate: Date = new Date('2024-03-05') 185 186 build() { 187 Column() { 188 Column() { 189 CalendarPicker({ hintRadius: 10, selected: this.selectedDate }) 190 .edgeAlign(CalendarAlign.END) 191 .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } }) 192 .margin(10) 193 .onChange((value) => { 194 console.info("CalendarPicker onChange:" + JSON.stringify(value)) 195 }) 196 }.alignItems(HorizontalAlign.End).width("100%") 197 198 Text('日历日期选择器').fontSize(30) 199 }.width('100%').margin({ top: 350 }) 200 } 201} 202``` 203 204 205 206### 示例2（设置开始日期和结束日期） 207 208该示例通过start和end设置日历选择器的开始日期和结束日期。 209 210```ts 211// xxx.ets 212@Entry 213@Component 214struct CalendarPickerExample { 215 private selectedDate: Date = new Date('2025-01-15') 216 private startDate: Date = new Date('2025-01-05') 217 private endDate: Date = new Date('2025-01-25') 218 219 build() { 220 Column() { 221 Column() { 222 CalendarPicker({ hintRadius: 10, selected: this.selectedDate, start: this.startDate, end: this.endDate }) 223 .edgeAlign(CalendarAlign.END) 224 .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } }) 225 .margin(10) 226 .onChange((value) => { 227 console.info("CalendarPicker onChange:" + JSON.stringify(value)) 228 }) 229 }.alignItems(HorizontalAlign.End).width("100%") 230 }.width('100%').margin({ top: 350 }) 231 } 232} 233``` 234 235 236
