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