React-datepicker: input width will not adjust to 100%

[rbar2]

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 it's width. I would just like to make the input width 100% of it's containing div.

Expected behavior

The width should expand to the width of it's parent container.

My react-datepicker

<div className="myContainer">
  <DatePicker
    className="myDatePicker"
    fixedHeight
    readOnly={true}
    isClearable={false}
    placeholderText="My 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%;
}

I have tried all of the following

.myDatePicker {   
  width: 100%;
}

.myDatePicker * {   
  width: 100%;
}

.react-datepicker__day-name, .react-datepicker__day {
  width: 10.9em;
}

/* .myContainer div:not(.react-datepicker-popper, .react-datepicker__week) { */
/* .myContainer .react-datepicker__input-container, .myContainer, .myContainer .react-datepicker-wrapper, .myContainer { */
/* .myContainer.react-datepicker__input-container, .container, .container.react-datepicker-wrapper, .container {  */
 .react-datepicker__input-container, .react-datepicker-wrapper, .container {
  width: 100%;
}

.container .react-datepicker__input-container, .container, .container .react-datepicker-wrapper, .container div {
  width: inherit;
}

.react-datepicker__input-container {
  width: 100%;
}

.container .react-datepicker-wrapper .react-datepicker-wrapper,
.container div:not(.react-datepicker-popper *) {
  width: 100%;
}

.container, .myDatePickerWrapper, .container .react-datepicker-wrapper, .container .react-datepicker__input-container {
.myDatePicker, .myDatePickerWrapper, .container .react-datepicker-wrapper, .container .react-datepicker__input-container {
  background: red;
  width: 100%;
  & :global .react-datepicker__input-container {
    width: 100%;
  }
}

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

Actual behavior

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

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

[rbar2]

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

[rbar2]

This is what worked for me. By default, the Manager class is null.. give it a class name, then you can apply css to it.

Go to node_modules > react-datepicker > es > index.js > line 2456:

Change:

return React.createElement(
  Manager,
  null,         // NOTE: change this line
  React.createElement(
    Target,
    { className: "react-datepicker-wrapper" },
    targetComponent
  ),
  popper
);

To:

return React.createElement(
  Manager,
  { className:"react-datepicker-manager" },  // NOTE: changed this line to contain a className
  React.createElement(
    Target,
    { className: "react-datepicker-wrapper" },
    targetComponent
  ),
  popper
);

---

Then you can apply css like this to make the width 100%:

.myContainer .react-datepicker-manager,
.myContainer .react-datepicker-wrapper,
.myContainer .react-datepicker__input-container {
  width: 100%;
}

---

Recommendation to Authors:
react-datepicker-manager should be added as the className on the Manager by default

[kochis]

I was able to achieve this by setting the wrapper and input-container to be display: block (instead of the default display: inline-block)

.react-datepicker-wrapper, .react-datepicker__input-container {
  display: block;
}

[evangow]

You might want to check out the 'custom input' or 'portal inline version' in the docs

https://reactdatepicker.com/#example-30
https://reactdatepicker.com/#example-41

[cmonkey03]

I'm using Semantic UI React and would like to set the input field to 100%, but am unable to do so. The previous solutions mentioned here do not work and have not found any solution in the docs.

[lorenz068]

There are 2 CSS class : react-datepicker-wrapper & react-datepicker__input-containerand they are display: inline-block. It could be nice to have control on that. This example https://reactdatepicker.com/#example-30 doesn't work because it embed the futur custom input in a display-block element

[pspray]

@cmonkey03 Forcing <Form.Field style={{ width: "100%" }}> and setting .react-datepicker-wrapper, .react-datepicker__input-container { display: block !important; } as @lorenz068 suggested worked for me in Semantic UI React.

[2yk]

I was able to achieve this by setting the wrapper and input-container to be display: block (instead of the default display: inline-block)

.react-datepicker-wrapper, .react-datepicker__input-container {
  display: block;
}

display: block !important;

Adding important works for me.
Thanks

[JivkoJelev91]

For me this works:

.react-datepicker-wrapper, .react-datepicker__input-container { display: block; }
.MyClass .react-datepicker-wrapper .react-datepicker__input-container input { width: 100% }

[Futekov3216]

SOLUTION https://github.com/Hacker0x01/react-datepicker/issues/1445#issuecomment-537830782
.react-datepicker-wrapper, .react-datepicker__input-container { display: block; }
.MyClass .react-datepicker-wrapper .react-datepicker__input-container input { width: 100% }

[dahveed-rb]

.react-datepicker-wrapper, .react-datepicker__input-container { display: block !important; } .react-datepicker-wrapper .react-datepicker__input-container input { width: 100% }

adding !important worked for me!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.