integrate input date b00tc4mp#220

venturars · Oct 28, 2024 · e507e8e · e507e8e
1 parent 6283c11
commit e507e8e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/staff/ventura-rodriguez/social-app/package.json b/staff/ventura-rodriguez/social-app/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
+    "moment": "2.30.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router": "6",

diff --git a/staff/ventura-rodriguez/social-app/src/components/DatePicker.jsx b/staff/ventura-rodriguez/social-app/src/components/DatePicker.jsx
@@ -2,20 +2,40 @@ import classNames from "classnames";
 import { useState } from "react";
 import Datepicker from "react-tailwindcss-datepicker";
 
-const DatePicker = ({ className, placeholder }) => {
+const DatePicker = ({
+  className,
+  placeholder,
+  inputId,
+  inputName,
+  useRange,
+  asSingle,
+  displayFormat,
+  maxDate,
+  minDate,
+  startFrom,
+}) => {
   const [value, setValue] = useState({
     startDate: null,
     endDate: null,
   });
 
   return (
-    <div className={classNames("datepicker", className)}>
+    <label className={classNames("datepicker block", className)}>
       <Datepicker
         value={value}
         onChange={(newValue) => setValue(newValue)}
+        primaryColor="pink"
         placeholder={placeholder}
+        inputId={inputId}
+        inputName={inputName}
+        useRange={useRange}
+        asSingle={asSingle}
+        displayFormat={displayFormat}
+        startFrom={startFrom}
+        maxDate={maxDate}
+        minDate={minDate}
       />
-    </div>
+    </label>
   );
 };
 

diff --git a/staff/ventura-rodriguez/social-app/src/components/SignupForm.jsx b/staff/ventura-rodriguez/social-app/src/components/SignupForm.jsx
@@ -1,11 +1,5 @@
 import { Link } from "react-router-dom";
-import {
-  IconDateOfBirth,
-  IconEmail,
-  IconPassword,
-  IconSignup,
-  IconUsername,
-} from "./icons";
+import { IconEmail, IconPassword, IconSignup, IconUsername } from "./icons";
 import classNames from "classnames";
 import { useState } from "react";
 import ES from "../locales/es.json";
@@ -19,6 +13,7 @@ import {
   UsernameNotValidError,
 } from "../tools/errors";
 import { DatePicker, FormErrorsSection } from ".";
+import moment from "moment";
 
 function SignupForm({ className, onSubmit }) {
   const [errors, setErrors] = useState(null);
@@ -33,6 +28,7 @@ function SignupForm({ className, onSubmit }) {
       password: inputPassword,
       repeatPassword: inputRepeatPassword,
     } = event.target;
+    debugger;
 
     const newErrors = [];
 
@@ -110,7 +106,7 @@ function SignupForm({ className, onSubmit }) {
               />
             </label>
             {/*  */}
-            <label className="input input-bordered input-ghost glass flex items-center gap-2 mb-4">
+            {/* <label className="input input-bordered input-ghost glass flex items-center gap-2 mb-4">
               <IconDateOfBirth fill="white" />
               <input
                 datepicker
@@ -120,12 +116,17 @@ function SignupForm({ className, onSubmit }) {
                 placeholder={ES.signupForm.inputDateOfBirth}
                 className="grow focus:text-white placeholder:text-white placeholder:text-opacity-70"
               />
-            </label>
+            </label> */}
             <DatePicker
               useRange={false}
               asSingle={true}
               placeholder={ES.signupForm.inputDateOfBirth}
               className="mb-4"
+              inputId="dateOfBirth"
+              inputName="dateOfBirth"
+              displayFormat="DD/MM/YYYY"
+              startFrom={moment().subtract(18, "years").toDate()}
+              maxDate={moment().subtract(18, "years").toDate()}
             />
             {/*  */}
             <label className="input input-bordered input-ghost glass flex items-center gap-2 mb-4">

diff --git a/staff/ventura-rodriguez/social-app/src/index.css b/staff/ventura-rodriguez/social-app/src/index.css
@@ -23,14 +23,19 @@
 }
 
 @layer components {
+  .datepicker {
+    @apply relative z-10;
+  }
   .datepicker > div {
     @apply !input !input-bordered !input-ghost !glass;
   }
   .datepicker > div > input {
-    @apply !text-base !pl-[28px] !h-full !ring-0 !grow focus:!text-white placeholder:!text-white placeholder:!text-opacity-70;
+    @apply !text-base !pl-[28px] !h-full !ring-0 !grow focus:!text-white placeholder:!text-white placeholder:!text-opacity-70 !transition-none !w-full !pr-2;
   }
   .datepicker > div > button {
-    @apply !left-0 !w-10 !px-4 !text-white
-    /* @apply col-span-1 col-start-1 row-start-1; */;
+    @apply !left-0 !w-10 !px-4 !text-white;
+  }
+  .datepicker > div > div > div {
+    @apply !bg-neutral-800;
   }
 }