23

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) enter image description here

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

1
  • Using styles to override styles will required !important. Try width: 100% !important;
    – jefelewis
    Apr 13, 2021 at 2:07

13 Answers 13

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%;
}
2
  • 1
    @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, 2019 at 1: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, 2020 at 8:01
12

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.

2
  • 2
    nice tailwind implementation there thanks Mar 9, 2021 at 13:07
  • 1
    wrapperClassName works, thanks!. Wondering its not on their documentation.
    – rjcarl
    Dec 6, 2021 at 1:41
9

Simple solution: Add this to your css file.

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

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

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

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

5
  • should myItem be myDatePicker?
    – Rbar
    Aug 6, 2018 at 15:19
  • Just tried the suggestion, but the width didn't change
    – Rbar
    Aug 6, 2018 at 15:21
  • I use this datepicker in every project. A working snippet would be appreciated to help you Aug 6, 2018 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 6, 2018 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. Aug 6, 2018 at 15:31
0

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

Another option:

  1. Remove all styling there is by default.
  2. 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.

0

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

2
  • 1
    Please read How do I write a good 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. Jul 26, 2022 at 3:15
  • It doesn't work for me Apr 3 at 6:37
0

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)}
  />
</>
0

If the DatePicker is inline:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.