全局UI方法-弹窗五-时间滑动选择器弹窗（TimePickerDialog）

1、描述

        以24小时的时间区间创建时间滑动选择器，展示在弹窗上。

2、接口

        TimePickerDialog.show(options?: TimePickerDialogOptions)

3、TimePickerDialogOptions

参数名	参数类型	必填	参数描述
selected	Date	否	设置当前选中的时间。 默认值：当前系统时间
userMilitaryTme	boolean	否	展示时间是否为24小时制，默认为12小时制。默认值：false。
onAccept	(value:TimePickerResult) => void	否	点击弹窗中的“确定”按钮时触发该回调。
onCancel	() => void	否	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value:TimePickerResult) => void	否	滑动弹窗中的选择器使当前选中时间改变时触发该回调。

4、TimePickerResult对象说明

返回值为24小时制时间。

名称	参数类型	描述
hour	number	选中时间的时。 取值范围：[0-23]
minute	number	选中时间的分。 取值范围：[0-59]

5、示例

@Entry
@Component
struct TimePickerDialogPage {
  @State message: string = '定义时间滑动选择器弹窗'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .width("96%")
          .margin({ top: 12 })

        Button("TimePickerDialog 12 Hour")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            TimePickerDialog.show({
              onAccept: (result: TimePickerResult) => {
                console.info("TimePickerDialog Default onAccept result = " + JSON.stringify(result));
              },
              onCancel: () => {
                console.info("TimePickerDialog Default onCancel");
              },
              onChange: (result: TimePickerResult) => {
                console.info("TimePickerDialog Default onChange result = " + JSON.stringify(result));
              }
            })
          })

        Button("TimePickerDialog 24 Hour")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            TimePickerDialog.show({
              selected: new Date("2024-01-20T20:30:00"),
              useMilitaryTime: true,
              onAccept: (result: TimePickerResult) => {
                console.info("TimePickerDialog Default onAccept result = " + JSON.stringify(result));
              },
              onCancel: () => {
                console.info("TimePickerDialog Default onCancel");
              },
              onChange: (result: TimePickerResult) => {
                console.info("TimePickerDialog Default onChange result = " + JSON.stringify(result));
              }
            })
          })

      }
      .width('100%')
      .height("100%")
    }
    .height('100%')
  }
}

6、效果图