第九节HarmonyOS 常用基础组件13-TimePicker

1、描述

时间选择组件，根据指定参数创建选择器，支持选择小时以及分钟。默认以24小时的时间区间创建滑动选择器。

2、接口

TimePicker(options?: {selected?: Date})

3、参数

selected - Date - 设置选中项的时间。默认是系统当前的时间。

4、属性

名称	参数类型	描述
useMilitaryTime	boolean	展示时间是否为24小时制。默认值：false

5、事件

onChange（callback: (value: TimePickerResult) => void） - 时间选择时触发该事件：

TimePickerResult对象说明

hour - number - 选中时间的时、

minute - number - 选中时间的分。

6、示例

import router from '@ohos.router'

@Entry
@Component
struct TimePickerPage {
  @State message: string = '时间选择组件，根据指定参数创建选择器，支持选择小时及分钟。'
  @State isMilitaryTime: boolean = false
  private selectedTime: Date = new Date('2022-07-22 10:00:00')
  @State curTime: string = '10 : 00'

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Text(this.isMilitaryTime ? "24小时制 time = " + this.curTime : "12小时制 time = " + this.curTime)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Button('切换12小时制/24小时制')
            .margin({ top: 30, bottom: 15 })
            .onClick(() => {
              this.isMilitaryTime = !this.isMilitaryTime
            })
          TimePicker({
            selected: this.selectedTime,
          })
            .useMilitaryTime(this.isMilitaryTime)
            .onChange((value: TimePickerResult) => {
              this.selectedTime.setHours(value.hour, value.minute)
              console.info('select current date is: ' + JSON.stringify(value))
              this.curTime = value.hour + " : " + value.minute
            })
            .margin({ top: 15, bottom: 30 })

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

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

7、效果图