时间选择组件

2024-01-22 17:31 更新

时间选择组件,根据指定参数创建选择器,支持选择小时及分钟。

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

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

默认以24小时的时间区间创建滑动选择器。

参数:

参数名

参数类型

必填

参数描述

selected

Date

设置选中项的时间。

默认值:当前系统时间

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

useMilitaryTime

boolean

展示时间是否为24小时制,不支持动态修改。

默认值:false

事件

除支持通用事件外,还支持以下事件:

名称

功能描述

onChange(callback: (value: TimePickerResult ) => void)

选择时间时触发该事件。

TimePickerResult对象说明

返回值为24小时制时间。

名称

参数类型

描述

hour

number

选中时间的时。

取值范围:[0-23]

minute

number

选中时间的分。

取值范围:[0-59]

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TimePickerExample {
  5. @State isMilitaryTime: boolean = false
  6. private selectedTime: Date = new Date('2022-07-22T08:00:00')
  7. build() {
  8. Column() {
  9. Button('切换12小时制/24小时制')
  10. .margin({ top: 30, bottom: 30 })
  11. .onClick(() => {
  12. this.isMilitaryTime = !this.isMilitaryTime
  13. })
  14. TimePicker({
  15. selected: this.selectedTime,
  16. })
  17. .useMilitaryTime(this.isMilitaryTime)
  18. .onChange((value: TimePickerResult) => {
  19. this.selectedTime.setHours(value.hour, value.minute)
  20. console.info('select current date is: ' + JSON.stringify(value))
  21. })
  22. }.width('100%')
  23. }
  24. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号