fix(calendarcard): 选择范围时支持仅选择单个日期 (#2009)

* fix(calendarcard): 选择范围时支持仅选择单个日期 * test(calendarcard): update
jdf2e · Mar 13, 2024 · 9a25a4f · 9a25a4f
1 parent d60fa15
commit 9a25a4f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/src/packages/calendarcard/__tests__/calendarcard.spec.tsx b/src/packages/calendarcard/__tests__/calendarcard.spec.tsx
@@ -91,7 +91,12 @@ test('test type range', async () => {
   const currentDays = container.querySelectorAll(
     '.nut-calendarcard-day.current'
   )
-  fireEvent.click(currentDays[1]) // 0102
+  fireEvent.click(currentDays[24]) // 0125
+  const startAndEnd = container.querySelectorAll(
+    '.nut-calendarcard-day.start.end'
+  )
+  expect(startAndEnd.length).toBe(1)
+
   fireEvent.click(currentDays[3]) // 0104
   fireEvent.click(currentDays[8]) // 0109
   const start = container.querySelector(

diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
@@ -61,22 +61,28 @@
       line-height: 12px;
     }
 
-    &.active,
+    &.weekend {
+      color: $calendar-choose-color;
+    }
+
+    &.active {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text;
+      border-radius: $calendar-day-active-border-radius;
+    }
+
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text !important;
-      border-radius: $calendar-day-active-border-radius;
+      color: $color-primary-text;
     }
 
     &.start {
-      border-radius: 0px;
       border-top-left-radius: $calendar-day-active-border-radius;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-radius: 0px;
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
@@ -86,10 +92,6 @@
       color: $calendar-choose-color;
     }
 
-    &.weekend {
-      color: $calendar-choose-color;
-    }
-
     .nut-calendar-day-info {
       color: $color-primary-text;
     }
@@ -127,17 +129,17 @@
     }
   }
   &-day {
+    &.start,
+    &.end {
+      border-radius: 0;
+    }
     &.start {
-      border-top-left-radius: 0;
       border-top-right-radius: $calendar-day-active-border-radius;
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-top-right-radius: 0;
       border-top-left-radius: $calendar-day-active-border-radius;
-      border-bottom-right-radius: 0;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
   }

diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx
@@ -353,7 +353,7 @@ export const CalendarCard = React.forwardRef<
           change([day])
         } else if (len === 1) {
           const t = compareDay(innerValue[0], day)
-          if (t === 0 || t === null || t === undefined) {
+          if (t === null || t === undefined) {
             change([])
           } else if (t < 0) {
             change([innerValue[0], day])

diff --git a/src/packages/calendarcard/calendarcard.tsx b/src/packages/calendarcard/calendarcard.tsx
@@ -353,7 +353,7 @@ export const CalendarCard = React.forwardRef<
           change([day])
         } else if (len === 1) {
           const t = compareDay(innerValue[0], day)
-          if (t === 0 || t === null || t === undefined) {
+          if (t === null || t === undefined) {
             change([])
           } else if (t < 0) {
             change([innerValue[0], day])