How to customize react-datepicker-wrapper class

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;
}

also try this without success:

.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,

Issue Analytics

State:
Created 3 years ago
Reactions:12
Comments:18

Top GitHub Comments

58reactions

sonny89commented, Oct 6, 2020

Try with wrapperClassName property:

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

.datePicker {
  width: 100%;
}

13reactions

Cordazarcommented, Jun 3, 2020

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

Top Results From Across the Web

Customization in React DatePicker component - Syncfusion

You can customize the entire appearance of the input element and Calendar by using custom cssClass property. and also you can use the...

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...

React custom datepicker: Step-by-step - LogRocket Blog

In this article, we'll solve the issue by building a custom React datepicker from scratch using native JavaScript Date objects.

React Multi Date Picker - ClassNames & Styles

Adding ClassName To Refrence Element (input) · inputClass · custom-input ; Adding ClassName To Popper Element (calendar) · className · custom-calendar ; Adding ......

Adding Styles to the React Date Picker - DevCamp

and paste it into an application picker. · So let's go ahead and basically add in the styles for our actual picker so...