MainView.ets 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { DateOption, YTDateUtil, YTAddressSelectorDialog } from "basic"
  2. import { UnitType } from "basic/src/main/ets/datepicker/DatePickerEnums"
  3. import { promptAction } from "@kit.ArkUI"
  4. @Component
  5. export struct MainView {
  6. build() {
  7. Text('打开日历')
  8. .onClick(() => {
  9. //以下内容都可以不传 有默认值
  10. const date: Date = new Date()
  11. const yTDateDialog = new YTAddressSelectorDialog(this.getUIContext())
  12. let dateOption = new DateOption()//选项配置类
  13. dateOption.date = date//当前日期 默认今天
  14. dateOption.minDate = new Date(2000,0,1)//最小选择的日期 默认10年前的今天
  15. dateOption.maxDate = new Date(2048,12,30)//最大选择的日期 默认10年后的今天
  16. dateOption.unitType = UnitType.YEAR_MONTH_DAY//日期单位 默认年月日 可选年月、月日等组合
  17. dateOption.confirm = (date: Date) => {//确认选择回调函数
  18. console.log('确认', YTDateUtil.formatDate( date))
  19. promptAction.openToast({message:YTDateUtil.formatDate( date)})
  20. }
  21. dateOption.headerLeftBuilder = wrapBuilder(headerLeftBuilder)//头部左侧按钮 默认返回按钮
  22. dateOption.headerRightBuilder = wrapBuilder(headerLeftBuilder)//头部右侧按钮 默认确认按钮
  23. dateOption.highlightBackgroundColor = Color.Pink//选中高亮背景色
  24. dateOption.highlightBorderColor = Color.Red//选中高亮边框色
  25. dateOption.textStyle = {//日期文字样式
  26. font:{size:20,weight:400},
  27. color:Color.Gray
  28. }
  29. dateOption.selectedTextStyle = {//选中日期文字样式
  30. font:{size:25,weight:400},
  31. color:Color.Yellow
  32. }
  33. yTDateDialog.show(dateOption)//设置好配置之后打开日历的函数
  34. })
  35. }
  36. }
  37. @Builder
  38. function headerLeftBuilder(){
  39. Image($r('app.media.app_icon'))
  40. .width(24)
  41. }
  42. @Builder
  43. function headerRightBuilder(){
  44. Image($r("app.media.app_icon"))
  45. .width(24)
  46. }