日期滑动选择器弹窗

2024-01-22 18:22 更新

根据指定的日期范围创建日期滑动选择器,展示在弹窗上。

说明

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

DatePickerDialog.show

show(options?: DatePickerDialogOptions)

定义日期滑动选择器弹窗并弹出。

DatePickerDialogOptions参数:

参数名

参数类型

必填

默认值

参数描述

start

Date

Date('1970-1-1')

设置选择器的起始日期。

end

Date

Date('2100-12-31')

设置选择器的结束日期。

selected

Date

当前系统日期

设置当前选中的日期。

lunar

boolean

false

日期是否显示为农历。

onAccept

(value: DatePickerResult) => void

-

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

onCancel

() => void

-

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

onChange

(value: DatePickerResult) => void

-

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

示例

  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方法设置按下确定按钮时的日期,这样当弹窗再次弹出时显示选中的是上一次确定的日期
  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. }

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号