当前位置：首页 > news >正文

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

news 2025/8/16 3:28:05

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 = falseprivate 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、效果图