Search code examples
cssreactjsreact-datepicker

react-datepicker input width will not adjust to 100%

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 like to make the input width 100% of its containing div.

Expected behavior

The width should expand to the width of its parent container.

My react-datepicker

<div className="myContainer">
  <DatePicker
    className="myDatePicker"
    fixedHeight
    readOnly={true}
    isClearable={false}
    placeholderText="End date"
    selected={this.props.defaultValue}
    onChange={(date) => this.props.handleDateChange(date)}
  />
</div>

Expected behavior

The following should result in the myDatePicker being the same width as the parent myContainer, but the width remains unchanged.

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%;  // note: if I change this value to a fixed value (such as 500px) then the width is effected
}

Closest Alternative attempt

The closest attempt was this, but it effects the width of the popup as well, causing it to stretch beyond the length of the entire screen, so this does not work as a solution either:

.myContainer div {
  width: 100%;
}

Actual behavior

The date picker remains the same length, unless a specific px value is set for the width.

Does anyone understand how to set the input width to 100% for react-datepicker?

EDIT I believe the reason it does not work like a typical input field is because react-datepicker is an input that is embedded deeper inside other divs that have their own styling (or lackthereof) enter image description here

EDIT #2: Here is a codepen showing the issue - https://codepen.io/anon/pen/bjxENG

Solution

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