修改日历

src/components/Picker/CalendarUI/CalendarUI.tsx

@@ -18,6 +18,7 @@ interface NutUICalendarProps {
   isBorder?: boolean;
   showQuickActions?: boolean;
   onHeaderClick?: (date: Date) => void;
+  showRangeStart?: boolean;
 }
 
 export interface CalendarUIRef {
@@ -32,6 +33,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
       value,
       onChange,
       isBorder = false,
+      showRangeStart = true,
       showQuickActions = true,
       onHeaderClick,
     },
@@ -195,7 +197,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
             isBorder ? styles["border"] : ""
           }`}
         >
-          {type === "range" && (
+          {type === "range" && showRangeStart &&  (
             <View className={styles["date-range-container"]}>
               <Text
                 className={`${styles["date-text-placeholder"]} ${

src/components/Picker/CalendarUI/index.module.scss

@@ -125,7 +125,7 @@
 }
 
 .cell {
-  height: 44px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -142,8 +142,8 @@
 }
 
 .cell-text.selected {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 22px;
   background: rgba(0, 0, 0, 0.9);
   color: #fff;
@@ -154,8 +154,8 @@
 
 // 时间段选择样式
 .cell-text.range-start {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 22px;
   background: rgba(0, 0, 0, 0.9);
   color: #fff;
@@ -165,8 +165,8 @@
 }
 
 .cell-text.range-end {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 22px;
   background: rgba(0, 0, 0, 0.9);
   color: #fff;
@@ -176,8 +176,8 @@
 }
 
 .cell-text.in-range {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 22px;
   background: rgba(0, 0, 0, 0.1);
   color: #000;
@@ -193,7 +193,7 @@
 
 .btn {
   flex: 1;
-  height: 44px;
+  height: 40px;
   border-radius: 22px;
   background: rgba(0, 0, 0, 0.06);
   display: flex;
@@ -299,18 +299,18 @@
 
   .nut-calendarcard-day {
     margin-bottom: 0px !important;
-    height: 44px;
-    width: 44px !important;
+    height: 40px;
+    width: 40px !important;
 
     &.active {
       background-color: #000 !important;
       color: #fff !important;
-      height: 44px;
+      height: 40px;
       border-radius: 22px !important;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 44px !important;
+      width: 40px !important;
       font-size: 24px !important;
 
       .day-container {
@@ -333,8 +333,8 @@
     .day-container {
       background-color: #f5f5f5;
       border-radius: 22px;
-      width: 44px;
-      height: 44px;
+      width: 40px;
+      height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;