時(shí)間滑動(dòng)選擇器彈窗

2024-01-22 18:22 更新

以24小時(shí)的時(shí)間區(qū)間創(chuàng)建時(shí)間滑動(dòng)選擇器,展示在彈窗上。

說(shuō)明

該組件從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

TimePickerDialog.show

show(options?: TimePickerDialogOptions)

定義時(shí)間滑動(dòng)選擇器彈窗并彈出。

TimePickerDialogOptions參數(shù):

參數(shù)名

參數(shù)類(lèi)型

必填

參數(shù)描述

selected

Date

設(shè)置當(dāng)前選中的時(shí)間。

默認(rèn)值:當(dāng)前系統(tǒng)時(shí)間

useMilitaryTime

boolean

展示時(shí)間是否為24小時(shí)制,默認(rèn)為12小時(shí)制。

默認(rèn)值:false

onAccept

(value: TimePickerResult) => void

點(diǎn)擊彈窗中的“確定”按鈕時(shí)觸發(fā)該回調(diào)。

onCancel

() => void

點(diǎn)擊彈窗中的“取消”按鈕時(shí)觸發(fā)該回調(diào)。

onChange

(value: TimePickerResult) => void

滑動(dòng)彈窗中的選擇器使當(dāng)前選中時(shí)間改變時(shí)觸發(fā)該回調(diào)。

示例

  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小時(shí)制")
  9. .margin(20)
  10. .onClick(() => {
  11. TimePickerDialog.show({
  12. selected: this.selectTime,
  13. onAccept: (value: TimePickerResult) => {
  14. // 設(shè)置selectTime為按下確定按鈕時(shí)的時(shí)間,這樣當(dāng)彈窗再次彈出時(shí)顯示選中的為上一次確定的時(shí)間
  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小時(shí)制")
  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. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)