Skip to content

Commit 12fab9a

Browse files
ViktorSvertokaViktorSvertoka
authored
Merge pull request #142 from ViktorSvertoka/StyledDatepicker
styled-datepicker
2 parents 3703d6e + 9813184 commit 12fab9a

File tree

3 files changed

+184
-3
lines changed

3 files changed

+184
-3
lines changed

‎src/components/Datepicker/StyledDatepicker.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import PropTypes from 'prop-types';
2+
3+
import DatePicker from 'react-datepicker';
4+
import { CalendarGlobalStyles } from './StyledDatepicker.styled';
5+
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
6+
7+
import { InputField } from '../UserForm/UserForm.styled';
8+
9+
const StyledDatepicker = ({ selectedDate, setSelectedDate }) => {
10+
const handleDateChange = date => {
11+
setSelectedDate(date);
12+
};
13+
14+
return (
15+
<>
16+
<DatePicker
17+
selected={selectedDate}
18+
onChange={handleDateChange}
19+
customInput={<InputField />}
20+
dateFormat={'dd-MM-yyyy'}
21+
calendarStartDay={1}
22+
formatWeekDay={day => day.substring(0, 1)}
23+
/>
24+
<CalendarGlobalStyles />
25+
</>
26+
);
27+
};
28+
29+
StyledDatepicker.propTypes = {
30+
selectedDate: PropTypes.instanceOf(Date),
31+
setSelectedDate: PropTypes.func,
32+
};
33+
34+
export default StyledDatepicker;

‎src/components/Datepicker/StyledDatepicker.styled.jsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { createGlobalStyle } from 'styled-components';
2+
3+
export const CalendarGlobalStyles = createGlobalStyle`
4+
.react-datepicker__wrapper {
5+
position: absolute;
6+
}
7+
.react-datepicker {
8+
position: absolute;
9+
left: 50%;
10+
top: 50%;
11+
transform: translate(-15%, 0%);
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
16+
padding: 14px;
17+
background-color: #ef8964;
18+
font-family: 'Roboto', sans-serif;
19+
border-radius: 8px;
20+
}
21+
.react-datepicker__month-container {
22+
float: inherit;
23+
box-sizing: border-box;
24+
}
25+
.react-datepicker__day-names {
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
padding-top: 14px;
30+
margin-bottom: 8px;
31+
border-top: 1px solid rgba(239, 237, 232, 0.2);
32+
}
33+
.react-datepicker__header {
34+
position: relative;
35+
background-color: #ef8964;
36+
}
37+
38+
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
39+
border-bottom: 0px;
40+
padding: 0;
41+
}
42+
.react-datepicker__day
43+
react-datepicker__day--018.react-datepicker__day--selected
44+
react-datepicker__day--today {
45+
outline: none;
46+
border: none;
47+
}
48+
// .react-datepicker__current-month {
49+
// color: #efede8;
50+
// font-family: 'Roboto', sans-serif;
51+
// font-size: 16px;
52+
// font-weight: 500;
53+
// line-height: normal;
54+
// margin-bottom: 14px;
55+
// }
56+
.react-datepicker__day-name {
57+
margin: 0;
58+
color: rgba(239, 237, 232, 0.5);
59+
font-family: 'Roboto', sans-serif;
60+
font-size: 14px;
61+
font-style: normal;
62+
font-weight: 500;
63+
line-height: normal;
64+
}
65+
66+
.react-datepicker__day--disabled {
67+
opacity: 25%;
68+
}
69+
.react-datepicker__navigation {
70+
margin-top: 14px;
71+
color: white;
72+
}
73+
.react-datepicker__navigation--previous {
74+
left: 7px;
75+
width: 18px;
76+
height: 18px;
77+
}
78+
.react-datepicker__navigation--next {
79+
right: 7px;
80+
width: 18px;
81+
height: 18px;
82+
}
83+
.react-datepicker__navigation-icon::before:hover:focus {
84+
border-color: white;
85+
}
86+
.react-datepicker__week {
87+
display: flex;
88+
align-items: center;
89+
justify-content: space-between;
90+
color: white;
91+
}
92+
.react-datepicker__day {
93+
display: flex;
94+
flex-direction: column;
95+
justify-content: center;
96+
align-items: center;
97+
flex-shrink: 0;
98+
margin: 0;
99+
border-radius: 50%;
100+
color: #efede8;
101+
font-family: 'Roboto', sans-serif;
102+
font-size: 14px;
103+
font-weight: 400;
104+
line-height: 18px;
105+
text-align: center;
106+
width: 24px;
107+
height: 24px;
108+
}
109+
.react-datepicker__month {
110+
display: flex;
111+
gap: 5px;
112+
flex-direction: column;
113+
justify-content: space-between;
114+
margin: 0;
115+
}
116+
.react-datepicker__day--selected {
117+
background-color: #040404;
118+
color: #efede8;
119+
font-size: 14px;
120+
}
121+
.react-datepicker__day--selected:hover {
122+
border-radius: 50%;
123+
background-color: white;
124+
}
125+
.react-datepicker__day:hover {
126+
border-radius: 50%;
127+
background-color: white;
128+
color: #ef8964;
129+
}
130+
.react-datepicker__day--keyboard-selected {
131+
border-radius: 50%;
132+
background-color: white;
133+
color: #ef8964;
134+
}
135+
.react-datepicker__day--outside-month {
136+
opacity: 50%;
137+
}
138+
.react-datepicker__triangle {
139+
display: none;
140+
}
141+
`;

‎src/components/UserForm/UserForm.jsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
// import { useEffect } from 'react';
1+
import { parseISO } from 'date-fns';
22
import { useDispatch, useSelector } from 'react-redux';
33
import { Formik, Field, Form } from 'formik';
44
import * as Yup from 'yup';
55

6+
import StyledDatepicker from '../Datepicker/StyledDatepicker';
67
import RadioOption from '../RadioOption/RadioOption';
78
import {
89
FormContainer,
@@ -64,7 +65,9 @@ const UserForm = () => {
6465
},
6566
];
6667

67-
const formattedDate = new Date(user.birthday).toISOString().split('T')[0];
68+
const formattedDate = parseISO(
69+
new Date(user.birthday).toISOString().split('T')[0],
70+
);
6871

6972
const initialValues = {
7073
name: user.name || 'Name',
@@ -137,7 +140,10 @@ const UserForm = () => {
137140
<SectionTitle>Desired Weight</SectionTitle>
138141
<Field type="number" name="desiredWeight" as={InputField} />
139142
</div>
140-
<Field type="date" name="birthday" as={InputField} />
143+
<StyledDatepicker
144+
selectedDate={formik.values.birthday}
145+
setSelectedDate={date => formik.setFieldValue('birthday', date)}
146+
/>
141147
</WrapperInputField>
142148

143149
<WrapperRadio>

0 commit comments

Comments
 (0)