HarmonyOS鸿蒙开发时间滑动选择器（12小时制、24小时制）

猿来编码

已于 2024-04-02 14:36:16 修改

阅读量242

点赞数 3

分类专栏：鸿蒙开发文章标签： harmonyos 华为

于 2024-03-22 14:18:16 首次发布

本文链接：https://blog.csdn.net/qq_36255346/article/details/136939660

版权

鸿蒙开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一直会分享，虽然鸿蒙目前来没有多大发展，但不可否然以后发展，华为的技术是一大突破，存在即合理
可以现在没有多大发展。但不可否定未来的发展。

关注’猿来编码‘，微信订阅号，回复 ’时间选择器‘，获取更多

HarmonyOS鸿蒙开发时间滑动选择器（12小时制、24小时制）

@Entry
@Component
struct Index {
  private selectTime: Date = new Date('2024-03-22T08:30:00')
  build() {
    Column({ space: 5 }) {
      Blank()
      Button("时间滑动选择器 12小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
      Button("时间滑动选择器 24小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
      Blank()
      Blank()
    }
    .width('100%').margin({ top: 5 })
    .height('100%')
  }
}