CODEWITHSUNDEEP
cssreactjsreact-datepicker
Rbar
Rbar

Reputation: 3918

react-datepicker input width will not adjust to 100%

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

Upvotes: 28

Views: 68363

Answers (14)

Mohammed Ali
Mohammed Ali

Reputation: 2926

If using Bootstrap 5 with React. We can use it like this (to make it take 100% width) :

<DatePicker
...
wrapperClassName="w-100"
/>

Upvotes: 0

Alexandru Cristea
Alexandru Cristea

Reputation: 1

If the DatePicker is inline:

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

Upvotes: 0

skeeter
skeeter

Reputation: 332

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

Upvotes: 0

amir vahed
amir vahed

Reputation: 9

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

Upvotes: 0

Paul Sender
Paul Sender

Reputation: 488

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

Upvotes: 2

user11939761
user11939761

Reputation:

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.

Upvotes: 0

Gams Basallo
Gams Basallo

Reputation: 1202

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.

Upvotes: 20

Marc Fearby
Marc Fearby

Reputation: 1384

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

Upvotes: 0

Xyox
Xyox

Reputation: 1

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>

Upvotes: 0

user11304031
user11304031

Reputation: 11

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

Upvotes: 1

Yash P Shah
Yash P Shah

Reputation: 809

Simple solution: Add this to your css file.

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

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

Upvotes: 9

Ilyas Assainov
Ilyas Assainov

Reputation: 2070

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

Upvotes: 44

Infinity
Infinity

Reputation: 43

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

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

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.

Upvotes: 0

Related Questions