fix：

1）自定义日期选择组件修改优化；

fix：
1）自定义日期选择组件修改优化；
wangyujian_wd
Commit a5061a67253c3e4ffee65fe8c0314735bc435198 a5061a67 1 parent e2211153
Showing 2 changed files with 62 additions and 65 deletions
sight_harmony/features/wdComponent/src/main/ets/components/calendar/RMCalendar.ets
sight_harmony/features/wdComponent/src/main/ets/components/calendar/RMCalendarCell.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/calendar/RMCalendar.ets
View file @a5061a6
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/calendar/RMCalendar.ets
View file @a5061a6
@@ -6,17 +6,18 @@ const TAG = "RMCalendar"
 @Component
 export struct RMCalendar {
   @State selectItem: RMCalendarBean = new RMCalendarBean()
-  private today: Date = new Date() // 当天
+  //选中的日期
+  private selectDay: Date = new Date()
   // 开始日期
   startDate: Date = new Date()
   // 截止日期
   endDate: Date = new Date()
   //当前日期-当前显示的月份的第一天
-  private startDay: Date = new Date(
-    this.today.getFullYear(),
-    this.today.getMonth(),
-    1
-  )
+  // private startDay: Date = new Date(
+  //   this.selectDay.getFullYear(),
+  //   this.selectDay.getMonth(),
+  //   1
+  // )
   // 是否有上一个月
   @State private hasPre: boolean = true
   // 是否有下一个月
@@ -42,12 +43,12 @@ export struct RMCalendar {
   itemFontColor: ResourceColor = "#333333"
   itemFontWeight: FontWeight = FontWeight.Bold
   // 今日字体颜色
-  todayFontColor: ResourceColor = "#ED2800"
+  selectDayFontColor: ResourceColor = "#ED2800"
   // 不能使用的日期字体颜色
   disabledFontColor: ResourceColor = "#CCCCCC"
   // 选中日期字体颜色
   selectFontColor: ResourceColor = "#FFFFFF"
-  // 选中日期背景颜色, 默认与todayFontColor一致
+  // 选中日期背景颜色, 默认与selectDayFontColor一致
   selectItemBgColor: ResourceColor = "#ED2800"
   @State private title: string = ''
   // 计算的总加载
@@ -57,7 +58,7 @@ export struct RMCalendar {
   // 自定义每一项布局
   public cellLayout?: (item: RMCalendarBean) => void
   // 仅自定义 今日 样式，当使用cellLayout时，tadayLayout无效
-  todayLayout?: (item: RMCalendarBean) => void
+  selectDayLayout?: (item: RMCalendarBean) => void
   // 计算item时，如需添加更多自定义属性时使用
   reBuildDateItem?: (item: RMCalendarBean) => RMCalendarBean
   // 选择变化监听，
@@ -84,10 +85,10 @@ export struct RMCalendar {
         cellLayout: this.cellLayout,
         itemFontSize: this.itemFontSize,
         itemFontColor: this.itemFontColor,
-        today: this.today.getTime(),
+        selectDay: this.selectDay.getTime(),
         itemFontWeight: this.itemFontWeight,
-        todayFontColor: this.todayFontColor,
-        todayLayout: this.todayLayout,
+        selectDayFontColor: this.selectDayFontColor,
+        selectDayLayout: this.selectDayLayout,
         selectItem: $selectItem,
         selectFontColor: this.selectFontColor,
         selectItemBgColor: this.selectItemBgColor,
@@ -123,12 +124,12 @@ export struct RMCalendar {
    */
   initAttr() {
     if (!this.selectItemBgColor) {
-      this.selectItemBgColor = this.todayFontColor
+      this.selectItemBgColor = this.selectDayFontColor
     }
-    this.today = new Date(
-      this.today.getFullYear(),
-      this.today.getMonth(),
-      this.today.getDate(),
+    this.selectDay = new Date(
+      this.selectDay.getFullYear(),
+      this.selectDay.getMonth(),
+      this.selectDay.getDate(),
     )
     // 开始日期
@@ -137,24 +138,24 @@ export struct RMCalendar {
     }
     // 截止日期
     if (!this.endDate) {
-      this.endDate = new Date(this.today.getFullYear() + 10, 11, 31)
+      this.endDate = new Date(this.selectDay.getFullYear() + 10, 11, 31)
     }
-    if (this.today.getTime() < this.startDate.getTime()) {
-      this.startDay.setTime(this.startDate.getTime())
-    } else if (this.today.getTime() > this.endDate.getTime()) {
-      this.startDay.setTime(this.endDate.getTime())
+    if (this.selectDay.getTime() < this.startDate.getTime()) {
+      this.selectDay.setTime(this.startDate.getTime())
+    } else if (this.selectDay.getTime() > this.endDate.getTime()) {
+      this.selectDay.setTime(this.endDate.getTime())
     } else {
-      this.startDay.setTime(this.today.getTime())
+      this.selectDay.setTime(this.selectDay.getTime())
     }
   }
   aboutToAppear() {
     this.initAttr()
     let temp = new RMCalendarBean()
-    temp.time = this.today.getTime()
+    temp.time = this.selectDay.getTime()
     this.selectItem = temp
-    this.calcDatas()
+    this.calcData()
   }
   /**
@@ -163,12 +164,12 @@ export struct RMCalendar {
   private nextMonth() {
     // this.dates.slice(0, this.dates.length)
     this.dates = []
-    const beforDate = new Date(this.startDay.getFullYear(), this.startDay.getMonth())
-    this.startDay.setMonth(this.startDay.getMonth() + 1)
+    const beforDate = new Date(this.selectDay.getFullYear(), this.selectDay.getMonth())
+    this.selectDay.setMonth(this.selectDay.getMonth() + 1)
     if (this.onMonthChange) {
-      this.onMonthChange(new Date(this.startDay.getFullYear(), this.startDay.getMonth()), beforDate)
+      this.onMonthChange(new Date(this.selectDay.getFullYear(), this.selectDay.getMonth()), beforDate)
     }
-    this.calcDatas()
+    this.calcData()
   }
   /**
@@ -177,60 +178,57 @@ export struct RMCalendar {
   private preMonth() {
     // this.dates.slice(0, this.dates.length)
     this.dates = []
-    const beforDate = new Date(this.startDay.getFullYear(), this.startDay.getMonth())
-    this.startDay.setMonth(this.startDay.getMonth() - 1)
+    const beforDate = new Date(this.selectDay.getFullYear(), this.selectDay.getMonth())
+    this.selectDay.setMonth(this.selectDay.getMonth() - 1)
     if (this.onMonthChange) {
-      this.onMonthChange(new Date(this.startDay.getFullYear(), this.startDay.getMonth()), beforDate)
+      this.onMonthChange(new Date(this.selectDay.getFullYear(), this.selectDay.getMonth()), beforDate)
     }
-    this.calcDatas()
+    this.calcData()
   }
   /**
    * 具体计算
    */
-  private calcDatas() {
-    const startDay = this.startDay
-    this.title = `${startDay.getFullYear()}年${startDay.getMonth() + 1}月`
-    startDay.setDate(1)
+  private calcData() {
-    if (startDay.getFullYear() < this.startDate.getFullYear()
-      || (startDay.getFullYear() == this.startDate.getFullYear() && startDay.getMonth() <= this.startDate.getMonth())) {
+    this.title = `${this.selectDay.getFullYear()}年${this.selectDay.getMonth() + 1}月`
+    this.selectDay.setDate(1)
+
+    if (this.selectDay.getFullYear() < this.startDate.getFullYear()
+      || (this.selectDay.getFullYear() == this.startDate.getFullYear() && this.selectDay.getMonth() <= this.startDate.getMonth())) {
       this.hasPre = false
     } else {
       this.hasPre = true
     }
-    if (startDay.getFullYear() > this.endDate.getFullYear()
-      || (startDay.getFullYear() == this.endDate.getFullYear() && startDay.getMonth() >= this.endDate.getMonth())) {
+    if (this.selectDay.getFullYear() > this.endDate.getFullYear()
+      || (this.selectDay.getFullYear() == this.endDate.getFullYear() && this.selectDay.getMonth() >= this.endDate.getMonth())) {
       this.hasNext = false
     } else {
       this.hasNext = true
     }
-
-    // 计算第一个月
-    // 获取第一个月总天数
-    let endDay: Date = new Date(
-      startDay.getFullYear(),
-      startDay.getMonth() + 1,
+    // 创建一个整月的日期，获取一个月总天数
+    let selectDate: Date = new Date(
+      this.selectDay.getFullYear(),
+      this.selectDay.getMonth() + 1,
       0, 23, 59, 59)
     let tempDate: Date = new Date(
-      startDay.getFullYear(),
-      startDay.getMonth(),
-      startDay.getDate()
+      this.selectDay.getFullYear(),
+      this.selectDay.getMonth(),
+      this.selectDay.getDate()
     )
+    //获取当月的总天数
+    const count = selectDate.getDate()
+    //当前日期是周几
+    const preCount = this.selectDay.getDay()
+    const totalCount = count + preCount
-    const count = endDay.getDate()
-    const preCount = startDay.getDay()
-    // const nextCount = 6 - endDay.getDay()
-    const nextCount = 0
-    const finilCount = count + preCount + nextCount
-
-    // 补齐上一个月
-    tempDate.setDate(tempDate.getDate() - preCount)
+    // 补齐上一个月差的天数，需要在当月展示的部分，下面计算日期循环加1天
+    tempDate.setDate(this.selectDay.getDate() - preCount)
-    // 添加日期
-    for (let index = 0; index < finilCount; index++) {
+    // 添加当月需要展示的日期
+    for (let index = 0; index < totalCount; index++) {
       let item = new RMCalendarBean(
         tempDate.getFullYear(),
         tempDate.getMonth(),
--- a/sight_harmony/features/wdComponent/src/main/ets/components/calendar/RMCalendarCell.ets
View file @a5061a6
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/calendar/RMCalendarCell.ets
View file @a5061a6
@@ -7,12 +7,12 @@ export struct RMCalenderCell {
   itemFontSize: Length = 0
   itemFontColor: ResourceColor = {} as ResourceColor
   itemFontWeight: FontWeight = FontWeight.Normal
-  todayFontColor: ResourceColor = {} as ResourceColor
+  selectDayFontColor: ResourceColor = {} as ResourceColor
   selectFontColor: ResourceColor = {} as ResourceColor
   selectItemBgColor: ResourceColor = {} as ResourceColor
   disabledFontColor: ResourceColor = {} as ResourceColor
   // 今日时间戳
-  today: number = 0
+  selectDay: number = 0
   @Link selectItem: RMCalendarBean
   @Link selectedDates: Array<RMCalendarBean>
   @Prop hasPre: boolean
@@ -20,7 +20,7 @@ export struct RMCalenderCell {
   @ObjectLink item: RMCalendarBean
   // 自定义每一项布局
   cellLayout?: (item: RMCalendarBean) => void
-  todayLayout?: (item: RMCalendarBean) => void
+  selectDayLayout?: (item: RMCalendarBean) => void
   cellClick?: (item: RMCalendarBean) => void
   disableClick?: (item: RMCalendarBean) => void
@@ -43,8 +43,6 @@ export struct RMCalenderCell {
       return this.disabledFontColor
     } else if (this.selectItem && this.selectItem.time == this.item.time) {
       return this.selectFontColor
-    } else if (this.item.time == this.today) {
-      return this.todayFontColor
     }
     return this.itemFontColor
   }
@@ -140,4 +138,5 @@ export struct RMCalenderCell {
       }
     })
   }
+
 }