鸿蒙Next中如何选择年月日时间组件

在鸿蒙Next开发中，如何正确使用日期时间选择器组件？需要实现一个能够选择年、月、日的时间选择功能，但不太清楚具体该用哪个组件以及如何设置参数。求教各位有经验的大佬，能否提供具体的代码示例或实现步骤？

2 回复

在鸿蒙Next中，选择年月日时间组件主要有两种方式：

  1. DatePicker组件（推荐）
  • 用于选择年月日
  • 支持设置日期范围
  • 可通过setNormalizedRange()限制可选日期
  • 支持中英文国际化
  1. TimePicker组件
  • 用于选择时分秒
  • 支持24小时制和12小时制
  • 可通过setHour24()切换时间格式

使用示例：

// 日期选择器
DatePicker({ start: new Date('2020-1-1'), end: new Date('2025-12-31') })
  .onChange((value: DatePickerResult) => {
    console.log(value.year + '-' + value.month + '-' + value.day)
  })

// 时间选择器  
TimePicker()
  .onChange((value: TimePickerResult) => {
    console.log(value.hour + ':' + value.minute)
  })

建议：如果只需要选择日期就用DatePicker，需要精确时间就配合TimePicker一起使用。

更多关于鸿蒙Next中如何选择年月日时间组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，选择年月日时间通常使用 DatePicker 组件。以下是具体实现方法：

1. 基本年月日选择器

import { DatePicker } from '@ohos/common';

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

  build() {
    Column() {
      DatePicker({
        start: new Date('1970-1-1'),  // 开始日期
        end: new Date('2100-12-31'),   // 结束日期
        selected: this.selectedDate    // 当前选中日期
      })
      .onChange((value: Date) => {
        this.selectedDate = value
        console.info('Selected date:' + value.toLocaleDateString())
      })
    }
  }
}

2. 自定义日期格式

DatePicker({
  selected: this.selectedDate
})
.lunar(false)              // 禁用农历
.useMilitaryTime(false)    // 12小时制

3. 精确到时间的日期选择器

// 时间精确到分钟
DatePicker({
  selected: this.selectedDate,
  type: DatePickerType.NORMAL  // 包含年月日时分
})

关键属性说明：

  • start/end：设置可选日期范围
  • selected：绑定选中日期
  • lunar：是否显示农历
  • type：选择器类型（日期/日期时间）

注意事项：

  1. 需在 build 方法中直接创建组件
  2. 日期对象使用标准 Date 类型
  3. 通过 onChange 事件监听日期变化

建议查阅最新官方文档获取完整 API 说明，因为鸿蒙 SDK 可能持续更新。

回到顶部