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

这篇文章介绍了Ohos框架中的TimePicker组件,包括其创建方法、接口、参数(如selected时间和useMilitaryTime)、属性和事件(onChange)。通过实例展示了如何使用组件进行12/24小时制时间选择,并提供了一个代码示例和组件的详细文档链接。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yyxhzdm

你的鼓励是我创作的最大动力!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值