第九节HarmonyOS 常用基础组件15-DatePickerl

1、描述

日期选择组件，用于根据指定日期范围创建日期滑动选择器。

2、接口

DatePicker(options:{start?: Date, end?: Date, selected?: Date})

3、参数

参数名	参数类型	必填	描述
start	Date	否	指定选择器的开始日期。默认值：Date(‘1970--1-1’)
end	Date	否	指定选择器结束日期。默认值：Date(‘2100--12-31’)
selected	Date	否	设置选中的日期。默认值：系统当前日期

4、属性

lunar - boolean - 日期是否显示农历（true：展示农历，false：不展示农历），默认值：false。

1. 事件

onChange(callback:(value: DatePickerResult) => void) - 选择日期时触发该事件。

6、DatePickerResult对象说明：

year - number - 选中日期的年

month - number - 选中日期的月（0-11）0：表示1月，11：表示12月。

day - number - 选中日期的日

7、示例

import router from '@ohos.router'

@Entry
@Component
struct DatePickerPage {
  @State message: string = '日期选择器组件，用于根据指定日期范围创建日期滑动选择器。'
  @State curSelectedDate: string = '';

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width('96%')

          Blank(12)
          DatePicker({ start: new Date("2000-1-1"), end: new Date("2050-1-1"), selected: new Date("2024-1-29") })
            .width("96%")
            .onChange((value: DatePickerResult) => {
              this.curSelectedDate = value.year + "年-" + (value.month + 1) + "月-" + value.day + "日";
            })
          Blank(12)
          Text("当前选择的日期：" + this.curSelectedDate)
            .fontSize(18)
            .width("96%")
            .fontWeight(FontWeight.Bold)

          Blank(12)
          DatePicker()
            .width("96%")
            .lunar(false)
          Blank(12)
          Text("农历")
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
          Blank(12)
          DatePicker()
            .width("96%")
            .lunar(true)
          Blank(12)
          Text("日期选择器中日期是默认日期")
            .fontSize(18)
            .fontWeight(FontWeight.Bold)

          Blank(12)
          Button("DataPicker文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/datePicker/DatePickerDesc",
              })
            })
          Blank(12)

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图