react-datepicker input width will not adjust to 100%
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";
<div className="customDatePickerWidth">
<DatePicker dateFormat="dd/MM/yyyy" />
</div>
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%;
}
Simple solution: Add this to your css file.
.react-datepicker__input-container {
width: inherit;
}
.react-datepicker-wrapper {
width: 100%;
}