react-datepicker input width will not adjust to 100% - css

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 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)
EDIT #2: Here is a codepen showing the issue - https://codepen.io/anon/pen/bjxENG

Answer 1

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 2

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 3

Simple solution: Add this to your css file.
.react-datepicker__input-container {
width: inherit;
}
.react-datepicker-wrapper {
width: 100%;
}

Answer 4

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 5

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

Answer 6

Gives the child (unnammed input) 100% while also give it's parent (__input-container) a block display.
.react-datepicker__input-container input {
display: block;
width: 100% !important;
}

Answer 7

just use:
<DatePicker containerStyle={{width: '100%'}}/>

Answer 8

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 9

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>

Answer 10

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 11

Another option:
Remove all styling there is by default.
Introduce the width of 100%
My React datepicker:
<div className="col-3">
<DatePicker
selected={st}
onChange={(date: Date) => checkAndChangeStartTime(date)}
showTimeSelect
showTimeSelectOnly
timeIntervals={5}
timeCaption="Time"
dateFormat="HH:mm"
timeFormat="HH:mm"
/>
</div>
The CSS to make this option work:
.react-datepicker-wrapper>.react-datepicker__input-container input {
all: unset !important;
width: 100% !important;
}
This forces the div to be 100% width, but requires you to start styling the element the beginning.