#跟着若城学鸿蒙# HarmonyOS NEXT学习之DatePicker组件详解

@兔然暴富@

519人浏览 · 2025-05-14 08:52:19

@兔然暴富@ · 2025-05-14 08:52:19 发布

一、组件介绍

DatePicker是HarmonyOS NEXT提供的日期选择器组件，用于让用户方便地选择日期。它提供了丰富的配置选项，可以满足各种日期选择的需求。

二、基本用法

1. 简单示例

@Entry
@Component
struct DatePickerExample {
  @State selectedDate: Date = new Date()

  build() {
    Column({ space: 20 }) {
      DatePicker({
        start: new Date('2020-1-1'),
        end: new Date('2030-12-31'),
        selected: this.selectedDate
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate = value.currentDate
          console.info('Selected date: ' + value.currentDate.toDateString())
        })
    }
  }
}

三、组件属性

1. 基础属性

属性名	类型	描述
start	Date	设置可选取的起始日期
end	Date	设置可选取的结束日期
selected	Date	设置当前选中的日期
lunar	boolean	设置是否显示农历信息，默认为false

2. 显示模式属性

属性名	类型	描述
datePickerMode	DatePickerMode	设置日期选择器的显示模式，可选值：Date（年月日）、Time（时分）、DateTime（年月日时分）
useMilitaryTime	boolean	设置是否使用24小时制，默认为true
showLunar	boolean	设置是否显示农历日期，默认为false

3. 样式属性

属性名	类型	描述
textStyle	TextStyle	设置文本样式
selectedTextStyle	TextStyle	设置选中项的文本样式
lunarTextStyle	TextStyle	设置农历文本样式
backgroundColor	Color	设置背景颜色

四、事件方法

1. onChange事件

当用户选择日期时触发，返回DatePickerResult对象，包含以下属性：

currentDate：当前选择的日期
hour：选择的小时（仅在DateTime模式下有效）
minute：选择的分钟（仅在DateTime模式下有效）

DatePicker()
  .onChange((value: DatePickerResult) => {
    console.info('Selected date:', value.currentDate)
  })

五、使用技巧

1. 日期范围限制

通过设置start和end属性，可以限制用户只能在指定的日期范围内进行选择：

DatePicker({
  start: new Date('2024-1-1'),
  end: new Date('2024-12-31')
})

2. 自定义样式

可以通过样式属性自定义DatePicker的外观：

DatePicker()
  .textStyle({
    fontSize: 16,
    color: Color.Black
  })
  .selectedTextStyle({
    fontSize: 20,
    color: Color.Blue
  })
  .backgroundColor(Color.White)

3. 日期时间选择

使用DateTime模式可以同时选择日期和时间：

DatePicker({
  datePickerMode: DatePickerMode.DateTime
})

六、最佳实践

1. 合理设置日期范围

根据业务需求设置合适的日期范围，避免用户选择无效日期：

// 设置只能选择未来30天的日期
const today = new Date()
const thirtyDaysLater = new Date()
thirtyDaysLater.setDate(today.getDate() + 30)

DatePicker({
  start: today,
  end: thirtyDaysLater
})

2. 提供默认值

为了更好的用户体验，建议提供合理的默认选中日期：

@State defaultDate: Date = new Date()

DatePicker({
  selected: this.defaultDate
})

3. 结合表单使用

在表单中使用DatePicker时，注意处理日期格式化和验证：

@Entry
@Component
struct DatePickerForm {
  @State birthDate: Date = new Date()
  private dateFormatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })

  build() {
    Column({ space: 20 }) {
      Text('出生日期：' + this.dateFormatter.format(this.birthDate))
        .fontSize(16)
      
      DatePicker({
        start: new Date('1900-1-1'),
        end: new Date(),
        selected: this.birthDate
      })
        .onChange((value: DatePickerResult) => {
          this.birthDate = value.currentDate
        })
    }
  }
}