added name and id

platformbuilders · Mar 5, 2024 · e21f361 · e21f361
1 parent cb2b551
commit e21f361
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 70 deletions.
diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -9,6 +9,8 @@ interface Props extends DatePickerProps {
   onChange: (date: DateObject) => void;
   minDate?: Date;
   maxDate?: Date;
+  name: string;
+  id: string;
   disableMonthPicker?: boolean;
   disableYearPicker?: boolean;
   workDays?: boolean;
@@ -24,19 +26,19 @@ const DatePickerComponent: React.FC<Props> = ({
   disableYearPicker,
   workDays,
   holidays,
+  name,
+  id,
 }) => {
   const datePickerRef = useRef();
   return (
     <CustomCalendar
       locale={localeCalendar}
-      className="custom-date-picker"
       ref={datePickerRef}
       render={(value, openCalendar, onChange) => {
         return (
           <TextInput
-            className="input-date"
-            name="date"
-            id="date"
+            name={name}
+            id={id}
             value={value}
             onClick={openCalendar}
             onChange={(e) => onChange(e)}

diff --git a/src/components/DatePicker/styles.ts b/src/components/DatePicker/styles.ts
@@ -10,79 +10,77 @@ const colorTextMain = getTheme('text.main');
 const spacingSm = getTheme('spacing.sm');
 
 export const CustomCalendar = styled(DatePicker)`
-  &.custom-date-picker {
-    margin-top: ${pxToRem(-18)};
-    .rmdp-ym {
-      flex-direction: row;
-    }
-    .rmdp-input {
-      cursor: pointer;
-    }
-    .rmdp-header div {
-      flex-direction: row;
-    }
-    .rmdp-header-values {
-      margin-left: ${pxToRem(5)};
-      font-size: ${fontSizeSm}px;
-      font-weight: 700;
-      color: ${colorTextMain};
-      flex-direction: row;
-    }
-    .rmdp-arrow-container {
-      padding-top: ${pxToRem(2)};
-      &:hover {
-        background-color: ${colorBrandPrimaryMain};
-        box-shadow: none;
-        > i {
-          border: solid ${colorBrandPrimaryContrast};
-          border-width: 0 ${pxToRem(2)} ${pxToRem(2)} 0;
-        }
-      }
-    }
-    .rmdp-arrow {
-      border: solid ${colorBrandPrimaryMain};
-      border-width: 0 ${pxToRem(2)} ${pxToRem(2)} 0;
-    }
-    .rmdp-left {
-      padding-right: ${pxToRem(2)};
-    }
-    .rmdp-right {
-      padding-left: ${pxToRem(1)};
-    }
-    .rmdp-arrow {
-      color: ${colorBrandPrimaryMain};
-    }
-    .rmdp-week {
-      margin: ${spacingSm} 0;
-      flex-direction: row;
-    }
-    .rmdp-week-day {
-      color: ${colorTextMain};
-      font-weight: 700;
-    }
-    .rmdp-day {
-      &:hover {
-        .span {
-          background-color: ${colorBrandPrimaryMain}10;
-        }
+  margin-top: ${pxToRem(-18)};
+  .rmdp-ym {
+    flex-direction: row;
+  }
+  .rmdp-input {
+    cursor: pointer;
+  }
+  .rmdp-header div {
+    flex-direction: row;
+  }
+  .rmdp-header-values {
+    margin-left: ${pxToRem(5)};
+    font-size: ${fontSizeSm}px;
+    font-weight: 700;
+    color: ${colorTextMain};
+    flex-direction: row;
+  }
+  .rmdp-arrow-container {
+    padding-top: ${pxToRem(2)};
+    &:hover {
+      background-color: ${colorBrandPrimaryMain};
+      box-shadow: none;
+      > i {
+        border: solid ${colorBrandPrimaryContrast};
+        border-width: 0 ${pxToRem(2)} ${pxToRem(2)} 0;
       }
     }
-    .rmdp-day span {
-      &:hover {
-        background-color: ${colorBrandPrimaryMain};
+  }
+  .rmdp-arrow {
+    border: solid ${colorBrandPrimaryMain};
+    border-width: 0 ${pxToRem(2)} ${pxToRem(2)} 0;
+  }
+  .rmdp-left {
+    padding-right: ${pxToRem(2)};
+  }
+  .rmdp-right {
+    padding-left: ${pxToRem(1)};
+  }
+  .rmdp-arrow {
+    color: ${colorBrandPrimaryMain};
+  }
+  .rmdp-week {
+    margin: ${spacingSm} 0;
+    flex-direction: row;
+  }
+  .rmdp-week-day {
+    color: ${colorTextMain};
+    font-weight: 700;
+  }
+  .rmdp-day {
+    &:hover {
+      .span {
+        background-color: ${colorBrandPrimaryMain}10;
       }
     }
-    .rmdp-day.rmdp-today span {
-      background-color: ${backgroundZ0}20;
-      color: ${colorTextMain};
-      &:hover {
-        background-color: ${colorBrandPrimaryMain};
-        color: ${colorBrandPrimaryContrast};
-      }
+  }
+  .rmdp-day span {
+    &:hover {
+      background-color: ${colorBrandPrimaryMain};
     }
-    .rmdp-day.rmdp-selected span:not(.highlight) {
+  }
+  .rmdp-day.rmdp-today span {
+    background-color: ${backgroundZ0}20;
+    color: ${colorTextMain};
+    &:hover {
       background-color: ${colorBrandPrimaryMain};
       color: ${colorBrandPrimaryContrast};
     }
   }
+  .rmdp-day.rmdp-selected span:not(.highlight) {
+    background-color: ${colorBrandPrimaryMain};
+    color: ${colorBrandPrimaryContrast};
+  }
 `;