React-datepicker: Inline DatePicker with text input

[abhikp]

Expected behavior

Is there a way to have an inline date picker with an input. Seems like this isn't possible.

An example of what I'd expect to be able to accomplish:

[abhikp]

This could also be possible with an option to only have a text parsing input and use DatePicker components sharing the same prop and handlers (one with only text parsing and one inline)

[abhikp]

I was able to solve this by using two DatePicker components that share the same selected and onChange props:

• One with inline=true
• Another with popperClassName equal to a class that had display: none

[aditigoel23]

Is there a better way to achieve this through props instead of adding multiple pickers?

[soorajbala]

@aditigoel23 just add a prop open={true}

[ArtemBernatskyy]

It could help someone

const someComponent = (props) => {
  const [startDate, setStartDate] = useState(new Date("2019/08/08"));
  const [endDate, setEndDate] = useState(new Date("2020/02/08"));

  const onChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <div className="popup-window">
      <div>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          popperClassName="d-none"
          dateFormat="d MMM yyyy"
          placeholderText="Select from date"
        />
        <DatePicker
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          popperClassName="d-none"
          dateFormat="d MMM yyyy"
          placeholderText="Select to date"
        />
        <DatePicker
          selected={startDate}
          onChange={onChange}
          startDate={startDate}
          endDate={endDate}
          disabledKeyboardNavigation
          selectsRange
          monthsShown={2}
          inline
        />
      </div>
    </div>
  );
};