1

I have a react datepicker (https://reactdatepicker.com/) component in my webpage.

Ideally when I tap on the date the popper would act as an element on the page (not a popper).

Ideally what it would look like:

enter image description here

What currently happens however is this?

What it does look like:

enter image description here

I've tried to mess with styling to force the popper to exist in the page not on top but I don't really have any idea how to do that well (new to web programming).

Does anyone have an idea of where to start to force the calendar component to behave like the first picture as opposed to the second one? It would be much appreciated.

I know it can be made inline but I want the behavior to be collapsed -> tap on the date -> open calendar.

Mohamed Bdr
  • 967
  • 3
  • 9
  • 20
Hcaz
  • 11
  • 1
  • You want the rest of the content to be forced down when the user clicks on the calendar? To me that is not good design. Why do you want that? – see sharper Feb 10 '21 at 00:32

1 Answers1

0

As per example a little down the project page, you can give the datepicker an inline attribute to make it a non-popper, like so:

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      inline
    />
  );
};

which produces the expected result:
enter image description here
With this out of the way, you only need to store your date/time wherever you need them in onChange.

YellowAfterlife
  • 2,967
  • 1
  • 16
  • 24
  • I know about the inline property, what I am trying to achieve however is a date-selector where the user can also type if need be. Currently I have the calendar inline and a separate text field that I am (kind of) validating but I wanted to see if anyone with more css experience could think of a way to force that behavior. The first screenshot is an inline datePicker and an input text field. The datepicker does a good job of text-validation and takes into account locale etc. which means it's more than me just checking mm/dd/yyyy – Hcaz Feb 09 '21 at 22:52
  • It does not seem like the library has the capacity of displaying both the field and the inline picker at once, but if editing your local copy is permitted, you can change [this line](https://github.com/Hacker0x01/react-datepicker/blob/b835323d3ebe5aeba525b7ceb370c288c7fd3ca3/src/index.jsx#L987) to retain the field even when the picker is marked as inline. Given the triviality, perhaps the developers would be open to adding an extra flag for it. – YellowAfterlife Feb 09 '21 at 23:07