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.
The width should expand to the width of its parent container.
<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>
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
}
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%;
}
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
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%;
}