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

To prevent the flex items from shrinking, set the flex shrink factor to 0:

.myContainer .myItem { flex-shrink: 0; }

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

.myDatePicker {   
  width: 100%; 
}

<div class="myContainer">
  <input class="myDatePicker">
</div>

The above snippet just works so there MUST be other code interfering with css or scaffolding.

Answer 2

Simple solution: Add this to your css file.

.react-datepicker__input-container {
  width: inherit;
}

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

Answer 3

This is my html

<div class="container">
    <div>
        <div class="react-datepicker-wrapper">
            <div class="react-datepicker__input-container">
                <input class="form-control" type="text" value="">
            </div>
        </div>
    </div>
</div>

I have used a wrapper div around the react date picker and used a specific css selector to make the wrapper divs react date picker applies around the input and the div I added to be width 100%

this is the css selector applied to a div which wraps the above snippet

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

The result is the input box width stretches to 100% but the pop-out date picker box stays the same width

Answer 4

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

Answer 5

I just passed a className to the component:

<DatePicker className='date-input-field' />

Here's how I set the width:

.date-input-field {
    max-width: 7rem;
}

Answer 6

Using styled-components

import styled from 'styled-components';
const DatePickerStyled = styled.div`
  /* STYLE FOR WITH */
  .react-datepicker-wrapper {
    width: 100%;
  }
`;

encloses the component

<DatePickerStyled>
  <DatePicker dateFormat="dd/MM/yyyy" />
</DatePickerStyled>