react-datepicker input width will not adjust to 100%

Question

I am attempting to adjust the width of the react-datepicker input box and surprisingly have found little information out there and am unable to effect its width. I would just l

Answer 1

I had the same issue and solved it thanks to Rbar's answer.

Wrap your DatePicker component with a custom container. Then assign the width to that container and its children like below:

import "./customDatePickerWidth.css";


   

Inside the customDatePickerWidth.css:

.customDatePickerWidth, 
.customDatePickerWidth > div.react-datepicker-wrapper, 
.customDatePickerWidth > div > div.react-datepicker__input-container
.customDatePickerWidth > div > div.react-datepicker__input-container input {
   width: 100%;
}