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

Answer 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

Answer 2

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'; 

Answer 3

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; 
}