React Date Range Picker

Question

I have a project am creating and I want to have a react-date-range calendar in the project. Problem is when displaying the calendar the dates are not aligned with the days. How can I[enter image description here align them properly.

Calendar Image

Calendar days and dates not aligned properly

score 1 · Answer 1 · answered Dec 13 '22 at 15:30

1

react-date-range can be installed with npm, by the following command:

npm install react-date-range

First, styles and theme file must be imported:

import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file

Then, import one of the 4 standalone components: DateRange, DateRangePicker, Calendar, DefinedRange

The best way is to follow documentation

answered Dec 13 '22 at 15:30

Adem kriouane

381
20

1

thank you, it's a well organized answer – Djerbien Dec 13 '22 at 15:33
Have done all that, still getting same output – Samson Njuguna Dec 13 '22 at 15:35

score 0 · Answer 2 · answered Dec 13 '22 at 15:21

0

make sure that you have the css imports in your code

import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

answered Dec 13 '22 at 15:21

Miguel Caro

280
1
4

I have the CSS imports but it still behaves like this – Samson Njuguna Dec 13 '22 at 15:25

score 0 · Answer 3 · answered Dec 13 '22 at 15:40

0

Consider including this style; from what I recall, it's effective:

.react-datepicker__time-container   .react-datepicker__time  
.react-datepicker__time-box   ul.react-datepicker__time-list {  
     padding: 0; 
}

answered Dec 13 '22 at 15:40

Adem kriouane

381
20

where should I input this style kindly? – Samson Njuguna Dec 13 '22 at 15:44
the file where react-date-range is called in the related CSS code @SamsonNjuguna – Adem kriouane Dec 13 '22 at 15:52

React Date Range Picker

3 Answers3