React-Datepicker Input Width Will Not Adjust to 100%

react-datepicker input width will not adjust to 100%

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

How can I reduce width and height of my dateTimePicker?

Override the CSS rules of react-datetime like the following:

.rdtPicker {
  width: 400px; //Change it your preferred width
}

.rdtPicker tr {
  height: 50px; //Choose the height of each row so that the overall height will change
}

Here's a working pen.

I'm having trouble with react-datepicker position

I fixed it as react-popper will place the popover in the same constraints as the
parent div. For cases where the parent div is somehow constrained -- a
scrollable div -- the popper will appear inside the div and will be
constrained by it to.

In my case I wanted the popover to be unconstrained it's
parent. To fix this, I placed the popover in a container outside of
the constrained container.

import { Portal } from "react-overlays";

const CalendarContainer = ({ children }) => {
  const el = document.getElementById("calendar-portal");

  return <Portal container={el}>{children}</Portal>;
};

And added the popperContainer prop to the DatePicker like so:

<DatePicker
    selected={startDate}
    onChange={onChangeDatePickerStartDate}
    dateFormat="yyyy-MM-dd"
    className="text-center date-picker-reports"
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
    onChangeRaw={handleDateChangeRaw}
    popperPlacement="top-start"
    placeholderText="Choose a start date"
    popperContainer={CalendarContainer}
/>

Final Result:

---

Related Topics