Merge pull request #142 from ViktorSvertoka/StyledDatepicker

styled-datepicker
ViktorSvertoka · Oct 1, 2023 · 12fab9a · 12fab9a
2 parents 3703d6e + 9813184
commit 12fab9a
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 3 deletions.
diff --git a/src/components/Datepicker/StyledDatepicker.jsx b/src/components/Datepicker/StyledDatepicker.jsx
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import DatePicker from 'react-datepicker';
+import { CalendarGlobalStyles } from './StyledDatepicker.styled';
+import 'react-datepicker/dist/react-datepicker-cssmodules.css';
+
+import { InputField } from '../UserForm/UserForm.styled';
+
+const StyledDatepicker = ({ selectedDate, setSelectedDate }) => {
+  const handleDateChange = date => {
+    setSelectedDate(date);
+  };
+
+  return (
+    <>
+      <DatePicker
+        selected={selectedDate}
+        onChange={handleDateChange}
+        customInput={<InputField />}
+        dateFormat={'dd-MM-yyyy'}
+        calendarStartDay={1}
+        formatWeekDay={day => day.substring(0, 1)}
+      />
+      <CalendarGlobalStyles />
+    </>
+  );
+};
+
+StyledDatepicker.propTypes = {
+  selectedDate: PropTypes.instanceOf(Date),
+  setSelectedDate: PropTypes.func,
+};
+
+export default StyledDatepicker;
diff --git a/src/components/Datepicker/StyledDatepicker.styled.jsx b/src/components/Datepicker/StyledDatepicker.styled.jsx
@@ -0,0 +1,141 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const CalendarGlobalStyles = createGlobalStyle`
+ .react-datepicker__wrapper {
+    position: absolute;
+  }
+  .react-datepicker {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-15%, 0%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 14px;
+    background-color: #ef8964;
+    font-family: 'Roboto', sans-serif;
+    border-radius: 8px;
+  }
+  .react-datepicker__month-container {
+    float: inherit;
+    box-sizing: border-box;
+  }
+  .react-datepicker__day-names {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 14px;
+    margin-bottom: 8px;
+    border-top: 1px solid rgba(239, 237, 232, 0.2);
+  }
+  .react-datepicker__header {
+    position: relative;
+    background-color: #ef8964;
+  }
+
+  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+    border-bottom: 0px;
+    padding: 0;
+  }
+  .react-datepicker__day
+    react-datepicker__day--018.react-datepicker__day--selected
+    react-datepicker__day--today {
+    outline: none;
+    border: none;
+  }
+  // .react-datepicker__current-month {
+  //   color: #efede8;
+  //   font-family: 'Roboto', sans-serif;
+  //   font-size: 16px;
+  //   font-weight: 500;
+  //   line-height: normal;
+  //   margin-bottom: 14px;
+  // }
+  .react-datepicker__day-name {
+    margin: 0;
+    color: rgba(239, 237, 232, 0.5);
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  .react-datepicker__day--disabled {
+    opacity: 25%;
+  }
+  .react-datepicker__navigation {
+    margin-top: 14px;
+    color: white;
+  }
+  .react-datepicker__navigation--previous {
+    left: 7px;
+    width: 18px;
+    height: 18px;
+  }
+  .react-datepicker__navigation--next {
+    right: 7px;
+    width: 18px;
+    height: 18px;
+  }
+  .react-datepicker__navigation-icon::before:hover:focus {
+    border-color: white;
+  }
+  .react-datepicker__week {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+  }
+  .react-datepicker__day {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0;
+    border-radius: 50%;
+    color: #efede8;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    width: 24px;
+    height: 24px;
+  }
+  .react-datepicker__month {
+    display: flex;
+    gap: 5px;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 0;
+  }
+  .react-datepicker__day--selected {
+    background-color: #040404;
+    color: #efede8;
+    font-size: 14px;
+  }
+  .react-datepicker__day--selected:hover {
+    border-radius: 50%;
+    background-color: white;
+  }
+  .react-datepicker__day:hover {
+    border-radius: 50%;
+    background-color: white;
+    color: #ef8964;
+  }
+  .react-datepicker__day--keyboard-selected {
+    border-radius: 50%;
+    background-color: white;
+    color: #ef8964;
+  }
+  .react-datepicker__day--outside-month {
+    opacity: 50%;
+  }
+  .react-datepicker__triangle {
+    display: none;
+  }
+`;
diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx
@@ -1,8 +1,9 @@
-// import { useEffect } from 'react';
+import { parseISO } from 'date-fns';
 import { useDispatch, useSelector } from 'react-redux';
 import { Formik, Field, Form } from 'formik';
 import * as Yup from 'yup';
 
+import StyledDatepicker from '../Datepicker/StyledDatepicker';
 import RadioOption from '../RadioOption/RadioOption';
 import {
   FormContainer,
@@ -64,7 +65,9 @@ const UserForm = () => {
     },
   ];
 
-  const formattedDate = new Date(user.birthday).toISOString().split('T')[0];
+  const formattedDate = parseISO(
+    new Date(user.birthday).toISOString().split('T')[0],
+  );
 
   const initialValues = {
     name: user.name || 'Name',
@@ -137,7 +140,10 @@ const UserForm = () => {
               <SectionTitle>Desired Weight</SectionTitle>
               <Field type="number" name="desiredWeight" as={InputField} />
             </div>
-            <Field type="date" name="birthday" as={InputField} />
+            <StyledDatepicker
+              selectedDate={formik.values.birthday}
+              setSelectedDate={date => formik.setFieldValue('birthday', date)}
+            />
           </WrapperInputField>
 
           <WrapperRadio>