MainView.ets 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import { BackgroundPageModifier, DateOption, YTAddressSelectorDialog, YTDateUtil } 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. Column() {
  8. Text('打开日历')
  9. .onClick(() => {
  10. //以下内容都可以不传 有默认值
  11. const date: Date = new Date()
  12. const yTDateDialog = new YTAddressSelectorDialog(this.getUIContext())
  13. let dateOption = new DateOption() //选项配置类
  14. dateOption.date = date //当前日期 默认今天
  15. dateOption.minDate = new Date(2000, 0, 1) //最小选择的日期 默认10年前的今天
  16. dateOption.maxDate = new Date(2048, 12, 30) //最大选择的日期 默认10年后的今天
  17. dateOption.unitType = UnitType.YEAR_MONTH_DAY //日期单位 默认年月日 可选年月、月日等组合
  18. dateOption.confirm = (date: Date) => { //确认选择回调函数
  19. console.log('确认', YTDateUtil.formatDate(date))
  20. promptAction.openToast({ message: YTDateUtil.formatDate(date) })
  21. }
  22. dateOption.headerLeftBuilder = wrapBuilder(headerLeftBuilder) //头部左侧按钮 默认返回按钮
  23. dateOption.headerRightBuilder = wrapBuilder(headerLeftBuilder) //头部右侧按钮 默认确认按钮
  24. dateOption.highlightBackgroundColor = Color.Pink //选中高亮背景色
  25. dateOption.highlightBorderColor = Color.Red //选中高亮边框色
  26. dateOption.textStyle = {
  27. //日期文字样式
  28. font: { size: 20, weight: 400 },
  29. color: Color.Gray
  30. }
  31. dateOption.selectedTextStyle = {
  32. //选中日期文字样式
  33. font: { size: 25, weight: 400 },
  34. color: Color.Yellow
  35. }
  36. yTDateDialog.show(dateOption) //设置好配置之后打开日历的函数
  37. })
  38. Image('https://hm-static.ytpm.net/upload/20250821/处暑-1755757002591.jpg')
  39. .width('100%')
  40. .height(300)
  41. }
  42. .attributeModifier(new BackgroundPageModifier(true))
  43. }
  44. }
  45. @Builder
  46. function headerLeftBuilder() {
  47. Image($r('app.media.app_icon'))
  48. .width(24)
  49. }
  50. @Builder
  51. function headerRightBuilder() {
  52. Image($r("app.media.app_icon"))
  53. .width(24)
  54. }