React-datepicker: How to customize react-datepicker-wrapper class

[chupee120]

Hello,

I'm not able to set width of datePicker to 100% .

The customization is applied to react-datepicker__input-container and input but not react-datepicker-wrapper.

import "./DatePickerInput.css";

<div className={style.containerDatePicker}>
   <DatePicker className={style.datePicker} dateFormat="dd/MM/yyyy" />
</div>

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

.datePicker {
  width: 100% !important;
}



md5-a1b0703f224fd79fe03e446633449cb5



.react-datepicker__input-container {
    display: block !important;
}

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

.datePicker {
  width: 100% !important;
}

Version is "react-datepicker": "^2.14.1"

Regards,

[cordero67]

I'm having the same problem. Bumping this issue.

[danielmdebrito]

The solution can be found here: https://stackoverflow.com/questions/55794770/how-can-i-style-react-datepicker

[Cordazar]

But this should be a simple option or className set from the component, instead of adding global css rules to override it.

[BrandonMathis]

I agree with @Cordazar. Overriding styles with CSS would not be ideal because my changes would impact every instance of the datepicker in my application.

Would be nice if we could pass a prop to at least append additional classes to the wrapper div.

[wude935]

I'm having the same issue. The react-datepicker-class should be exposed via props so that styling is possible without editing all global instances, IMO.

[jaypeetancero]

I hope this concern would be resolve I don't want to create global style just for that.

[sonny89]

Try with wrapperClassName property:

<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />

.datePicker {
  width: 100%;
}

[rosghub]

@sonny89 confirming this works great

[isaacminogue]

Whilst the above styles the input itself, if you want to style the calendar component, I've had success with <DatePicker calendarClassName={/* conditions */}></DatePicker> with conditional statements to show different classes based on values in the parent component