日期滑動(dòng)選擇器彈窗

2024-01-22 18:22 更新

根據(jù)指定的日期范圍創(chuàng)建日期滑動(dòng)選擇器,展示在彈窗上。

說明

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

DatePickerDialog.show

show(options?: DatePickerDialogOptions)

定義日期滑動(dòng)選擇器彈窗并彈出。

DatePickerDialogOptions參數(shù):

參數(shù)名

參數(shù)類型

必填

默認(rèn)值

參數(shù)描述

start

Date

Date('1970-1-1')

設(shè)置選擇器的起始日期。

end

Date

Date('2100-12-31')

設(shè)置選擇器的結(jié)束日期。

selected

Date

當(dāng)前系統(tǒng)日期

設(shè)置當(dāng)前選中的日期。

lunar

boolean

false

日期是否顯示為農(nóng)歷。

onAccept

(value: DatePickerResult) => void

-

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

onCancel

() => void

-

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

onChange

(value: DatePickerResult) => void

-

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

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct DatePickerDialogExample {
  5. selectedDate: Date = new Date("2010-1-1")
  6. build() {
  7. Column() {
  8. Button("DatePickerDialog")
  9. .margin(20)
  10. .onClick(() => {
  11. DatePickerDialog.show({
  12. start: new Date("2000-1-1"),
  13. end: new Date("2100-12-31"),
  14. selected: this.selectedDate,
  15. onAccept: (value: DatePickerResult) => {
  16. // 通過Date的setFullYear方法設(shè)置按下確定按鈕時(shí)的日期,這樣當(dāng)彈窗再次彈出時(shí)顯示選中的是上一次確定的日期
  17. this.selectedDate.setFullYear(value.year, value.month, value.day)
  18. console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
  19. },
  20. onCancel: () => {
  21. console.info("DatePickerDialog:onCancel()")
  22. },
  23. onChange: (value: DatePickerResult) => {
  24. console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
  25. }
  26. })
  27. })
  28. Button("Lunar DatePickerDialog")
  29. .margin(20)
  30. .onClick(() => {
  31. DatePickerDialog.show({
  32. start: new Date("2000-1-1"),
  33. end: new Date("2100-12-31"),
  34. selected: this.selectedDate,
  35. lunar: true,
  36. onAccept: (value: DatePickerResult) => {
  37. this.selectedDate.setFullYear(value.year, value.month, value.day)
  38. console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
  39. },
  40. onCancel: () => {
  41. console.info("DatePickerDialog:onCancel()")
  42. },
  43. onChange: (value: DatePickerResult) => {
  44. console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
  45. }
  46. })
  47. })
  48. }.width('100%')
  49. }
  50. }

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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)