How to set react-dates calendar always open?

Question

I am using react-dates library , DateRangePicker and trying to show calendar when component is rendered.

I thought there would be props supported by react-dates itself but after an hour of searching I could not find it.

import React, { useState  } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

function Datepicker() {
  const [dateRange, setdateRange] = useState({
    startDate: null,
    endDate: null
  });
  const [focus, setFocus] = useState(null);

  const { startDate, endDate } = dateRange;

  const handleOnDateChange = (startDate, endDate) =>
    setdateRange(startDate, endDate);

  return (
      <DateRangePicker
        startDatePlaceholderText="Start"
        startDate={startDate}
        startDateId="startDate"
        onDatesChange={handleOnDateChange}
        endDatePlaceholderText="End"
        endDate={endDate}
        endDateId="endDate"
        displayFormat="MMM D"
        focusedInput={focus}
        onFocusChange={focus => setFocus(focus)}
      />
  );
}

export default Datepicker;

Is there a callback function that I can use as a leverage to keep opening the calendar?

or should I change default set of 'react-dates/lib/css/_datepicker.css'?

Answer 1

I reviewed the source code of react-dates and you need to add this to always show picker.

const [focus, setFocus] = useState('startDate');

Hope this should work.