当前位置:   article > 正文

鸿蒙:日期滑动选择器弹窗

鸿蒙:日期滑动选择器弹窗

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

该组件从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. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/274934
推荐阅读
相关标签
  

闽ICP备14008679号