From 2d9100d3aa82d2901142464b7117c01cfbd6d04e Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Thu, 25 Aug 2022 16:51:10 +0530
Subject: date picker

---
 client/src/pages/Enrollment/FormOne/FormOne.jsx    | 35 +++++++++++++++++++---
 .../pages/Enrollment/FormOne/FormOne.module.css    |  8 ++++-
 2 files changed, 38 insertions(+), 5 deletions(-)

(limited to 'client/src/pages')

diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index f34a2ea..a1d4b7d 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -7,6 +7,10 @@ import styles from './FormOne.module.css'
 import { userContext } from '../../../context/User'
 import PopUpModal from '../../../components/Modal/Modal'
 import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'
+import { TextField } from '@mui/material'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 
 const FormOne = () => {
   const { t } = useTranslation()
@@ -32,7 +36,12 @@ const FormOne = () => {
     }
   }, [userData.gender])
 
-  const description = ['SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX', 'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION', 'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD', 'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER']
+  const description = [
+    'SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX',
+    'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION',
+    'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD',
+    'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER'
+  ]
 
   return (
     <>
@@ -44,7 +53,11 @@ const FormOne = () => {
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }
@@ -145,7 +158,21 @@ const FormOne = () => {
 
         <div className={styles.formone__dob}>
           <label htmlFor="dob">{t('DATE_OF_BIRTH')}</label>
-          <input
+          <LocalizationProvider dateAdapter={AdapterMoment}>
+            <MobileDatePicker
+              label="Date mobile"
+              inputFormat="mm/dd/yyyy"
+              value={userData.dob}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  dob: e
+                })
+              }}
+              renderInput={(params) => <TextField {...params} />}
+            />
+          </LocalizationProvider>
+          {/* <input
             className={styles.formone__dob_input}
             type="date"
             id="dob"
@@ -158,7 +185,7 @@ const FormOne = () => {
               })
             }}
             required
-          />
+          /> */}
         </div>
       </div>
     </>
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css
index 646ea12..b83574a 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.module.css
+++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -44,10 +44,16 @@
   margin: 0;
 }
 
+.formone__dob label {
+  font-size: 1.75rem;
+}
+
 .formone__dob_input {
-  width: 330px;
+  width: 500px;
+  height: 80px;
   margin: 10px 0px;
   padding: 11px 10px;
   border: 3px solid;
   border-radius: 10px;
+  font-size: 1.5rem;
 }
-- 
cgit