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 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

Using styles to override styles will required `!important`. Try `width: 100% !important;` — jefelewis, Apr 13 '21 at 02:07

score 39 · Accepted Answer · edited Feb 20 '19 at 04:00

39

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

edited Feb 20 '19 at 04:00

Rbar

3,740
9
39
69

answered Feb 01 '19 at 13:52

Ilyas Assainov

1,901
13
15

@Ilyas! agreed. great solution. It took me a few days to have a moment test out myself , but I just tried this out and like this better than my solution – simple, shareable, and solves the issue of needing to modify `node_modules`. Great use of CSS! Suggested just one edit, which is that it should make sure the `input` is set to `width: 100%` as well – Rbar Feb 20 '19 at 01:06
3

Almost 2 years have passed and it is still a thing. Positioning Autocomplete, Datepicker and simple TextField in a row was the biggest challenge for me so far.. React, redux, async Thunks? Nah, just how put this damn DatePicker where I want.. that was the tricky part.. – Bart Jun 10 '20 at 08:01

score 12 · Answer 2 · answered Dec 21 '20 at 02:04

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.

wrapperClassName works, thanks!. Wondering its not on their documentation. — rjcarl, Dec 06 '21 at 01:41

score 9 · Answer 3 · answered Mar 03 '19 at 03:45

9

Simple solution: Add this to your css file.

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

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

answered Mar 03 '19 at 03:45

Yash P Shah

779
11
15

score 1 · Answer 4 · edited Jan 30 '19 at 06:57

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

score 1 · Answer 5 · answered Apr 03 '19 at 07:33

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

please add some explanations – Remigius Stalder Apr 03 '19 at 07:47 — Remigius Stalder, Apr 03 '19 at 07:47

score 1 · Answer 6 · answered Mar 30 '22 at 21:41

1

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

answered Mar 30 '22 at 21:41

Paul Sender

376
2
19

Mosè Raguzzini · Answer 7 · 2018-08-06T15:34:43.763

0

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.

edited Aug 06 '18 at 15:34

answered Aug 06 '18 at 15:13

Mosè Raguzzini

15,399
1
31
43

should `myItem ` be `myDatePicker`? – Rbar Aug 06 '18 at 15:19
Just tried the suggestion, but the width didn't change – Rbar Aug 06 '18 at 15:21
I use this datepicker in every project. A working snippet would be appreciated to help you – Mosè Raguzzini Aug 06 '18 at 15:22
What details are you looking for beyond what I have provided for "My react-datepicker" and the css under "Expected behavior"? Happy to provide other but there is anything else to provide – Rbar Aug 06 '18 at 15:28
I need a codepen o a jsfiddle with a renderable code. If this simple fix does not works (and I have a lot of project where it works) there should be some detail you've missed. – Mosè Raguzzini Aug 06 '18 at 15:31

score 0 · Answer 8 · answered Mar 02 '20 at 15:59

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>

score 0 · Answer 9 · answered Aug 09 '20 at 02:25

0

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

answered Aug 09 '20 at 02:25

Marc Fearby

1,305
1
13
28

score 0 · Answer 10 · answered Aug 24 '21 at 13:27

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.

amir vahed · Answer 11 · 2022-07-25T11:05:55.150

0

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

edited Jul 25 '22 at 11:05

answered Jul 25 '22 at 11:05

amir vahed

9
2

1

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Saeed Zhiany Jul 26 '22 at 03:15
It doesn't work for me – Neha Chaudhary Apr 03 '23 at 06:37

score 0 · Answer 12 · answered May 12 '23 at 16:58

if you're using React and don't want to add more css rules you can use the style tag like so:

<>
  <style>
    {
      `input {
         width: 100%;
       }`
    }
  </style>
  <DatePicker
    selected={datetime}
    onChange={(date) => setDatetime(date)}
  />
</>

score 0 · Answer 13 · answered Jul 15 '23 at 09:50

0

If the DatePicker is inline:

.react-datepicker,
.react-datepicker__month-container{
  width: 100%;
}

answered Jul 15 '23 at 09:50

Alexandru Cristea

1

react-datepicker input width will not adjust to 100%

Expected behavior

My react-datepicker

Expected behavior

Closest Alternative attempt

Actual behavior

13 Answers13

Linked