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 also stumbled into this issue as well. To solve this, there is a property that you can add directly to the DatePicker component which is the "wrapperClassName" and this property will allow us to directly apply classes to the "react-datepicker-wrapper".

Example:

and then

.datepicker {
    width: 100%;
}

or if you are using tailwindcss, just directly apply

Note: This will only make the wrapper to be full width, therefore you will also need to apply "width: 100%" on the datepicker component if you want the input field to occupy full width as well.