时间滑动选择器弹窗

2024-01-22 18:22 更新

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

说明

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

TimePickerDialog.show

show(options?: TimePickerDialogOptions)

定义时间滑动选择器弹窗并弹出。

TimePickerDialogOptions参数:

参数名

参数类型

必填

参数描述

selected

Date

设置当前选中的时间。

默认值:当前系统时间

useMilitaryTime

boolean

展示时间是否为24小时制,默认为12小时制。

默认值:false

onAccept

(value: TimePickerResult) => void

点击弹窗中的“确定”按钮时触发该回调。

onCancel

() => void

点击弹窗中的“取消”按钮时触发该回调。

onChange

(value: TimePickerResult) => void

滑动弹窗中的选择器使当前选中时间改变时触发该回调。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TimePickerDialogExample {
  5. private selectTime: Date = new Date('2020-12-25T08:30:00')
  6. build() {
  7. Column() {
  8. Button("TimePickerDialog 12小时制")
  9. .margin(20)
  10. .onClick(() => {
  11. TimePickerDialog.show({
  12. selected: this.selectTime,
  13. onAccept: (value: TimePickerResult) => {
  14. // 设置selectTime为按下确定按钮时的时间,这样当弹窗再次弹出时显示选中的为上一次确定的时间
  15. this.selectTime.setHours(value.hour, value.minute)
  16. console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
  17. },
  18. onCancel: () => {
  19. console.info("TimePickerDialog:onCancel()")
  20. },
  21. onChange: (value: TimePickerResult) => {
  22. console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
  23. }
  24. })
  25. })
  26. Button("TimePickerDialog 24小时制")
  27. .margin(20)
  28. .onClick(() => {
  29. TimePickerDialog.show({
  30. selected: this.selectTime,
  31. useMilitaryTime: true,
  32. onAccept: (value: TimePickerResult) => {
  33. this.selectTime.setHours(value.hour, value.minute)
  34. console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
  35. },
  36. onCancel: () => {
  37. console.info("TimePickerDialog:onCancel()")
  38. },
  39. onChange: (value: TimePickerResult) => {
  40. console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
  41. }
  42. })
  43. })
  44. }.width('100%')
  45. }
  46. }

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号