CalendarPicker

The <CalendarPicker> component provides a drop-down calendar for users to select a date.

NOTE

This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

CalendarPicker(options?: CalendarOptions)

Creates a calendar picker.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
options CalendarOptions No Parameters of the calendar picker.

Attributes

In addition to the universal attributes, the following attributes are supported.

Name Type Description
edgeAlign alignType: CalendarAlign, offset?: Offset How the picker is aligned with the entry component.
- alignType: alignment type.
Default value: CalendarAlign.END
- offset: offset of the picker relative to the entry component after alignment based on the specified alignment type.
Default value: {dx: 0, dy: 0}.
textStyle PickerTextStyle Font color, font size, and font width in the entry area.

Events

In addition to the universal events, the following events are supported.

Name Description
onChange(callback: (value: Date) => void) Triggered when a date is selected.
value: selected date value

CalendarOptions

Name Type Mandatory Description
hintRadius number | Resource No Style of the background of the selected state.
Default value: The background is a circle.
NOTE
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.
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.
Default value: current system date

CalendarAlign

Since API version 9, this API is supported in ArkTS widgets.

Name Description
START The picker is left aligned with the entry component.
CENTER The picker is center aligned with the entry component.
END The picker is right aligned with the entry component.

Example

// xxx.ets
@Entry
@Component
struct CalendarPickerExample {
  private selectedDate: Date = new Date()
  build() {
    Column() {
      Text('Calendar date picker').fontSize(30)
      Column() {
        CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
          .edgeAlign(CalendarAlign.END)
          .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
          .margin(10)
          .onChange((value) => {
            console.info("CalendarPicker onChange:" + JSON.stringify(value))
          })
      }.alignItems(HorizontalAlign.End).width("100%")
    }.width('100%').margin({top:350})
  }
}

CalendarPicker