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:

<DatePicker wrapperClassName="datepicker" />

and then

.datepicker {
    width: 100%;
}

or if you are using tailwindcss, just directly apply

<DatePicker wrapperClassName="w-full" />

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.

Answer 2

//html file
  <div className="customDatePickerWidth">
              <DatePicker
                placeholderText="Select Schedule Date"
             />
  </div>

//css file    
.customDatePickerWidth, 
    .customDatePickerWidth > div.react-datepicker-wrapper, 
    .customDatePickerWidth > div > div.react-datepicker__input-container
    .customDatePickerWidth > div > div.react-datepicker__input-container input {
       width: 100%;
       height: 100%;
    }
    .react-datepicker__input-container  {
        width: inherit;
        height: inherit;
      }
      .react-datepicker__input-container input {
        width: inherit;
        height: 100%;
      }

      .react-datepicker-wrapper {
        width: 100%;
      }