鴻蒙ArkTS聲明式組件：CalendarPicker

CalendarPicker

日歷選擇器組件,提供下拉日歷彈窗，可以讓用戶選擇日期。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 10開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

無

接口

CalendarPicker(options?: CalendarOptions)

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數(shù)類型	描述
edgeAlign	alignType: [CalendarAlign]，offset?: [Offset]	設置選擇器與入口組件的對齊方式。 -alignType: 對齊方式類型。默認值：CalendarAlign .END。 -offset: 按照對齊類型對齊后，選擇器相對入口組件的偏移量。默認值：{dx: 0, dy: 0}。
textStyle	[PickerTextStyle]	設置入口區(qū)的文本顏色、字號、字體粗細。

事件

除支持[通用事件]，還支持以下事件：

名稱	功能描述
onChange(callback: (value: Date) => void)	選擇日期時觸發(fā)該事件。 value：選中的日期值

CalendarOptions對象說明

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
hintRadius	number	[Resource]	否
selected	Date	否	設置選中項的日期。默認值：當前系統(tǒng)日期。

CalendarAlign枚舉說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	描述
START	設置選擇器與入口組件左對齊的對齊方式。
CENTER	設置選擇器與入口組件居中對齊的對齊方式。
END	設置選擇器與入口組件右對齊的對齊方式。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151547.png

示例

// xxx.ets
@Entry
@Component
struct CalendarPickerExample {
  private selectedDate: Date = new Date()
  build() {
    Column() {
      Text('月歷日期選擇器').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})
  }
}