How to add a close button to close the calendar on react-dates?

Question

I am using react-dates provided from Airbnb. It works perfectly for desktop and mobile view.

The only thing is when I render the calendar on mobile view. Is there any way I can create a close button for the calendar?

This is how it looks on my mobile view:

What i want is a close [X] button on the upper right corner to close the calender. Now i need to choose dates before its closed.

My code for DatePickerRange:

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

export default function DatePicker() {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [focusedInput, setFocusedInput] = useState(null);

    const setStartAndEndDate = (startDateInput, endDateInput) => {
        setStartDate(startDateInput);
        setEndDate(endDateInput);
    };

    const smallDevice = window.matchMedia('(max-width: 400px)').matches;
    const orientation = smallDevice ? 'vertical' : 'horizontal';

    return (
        <>
            <DateRangePicker
                displayFormat="DD/MM/YYYY"
                startDate={startDate} // momentPropTypes.momentObj or null,
                startDateId="startDate" // PropTypes.string.isRequired,
                endDate={endDate} // momentPropTypes.momentObj or null,
                endDateId="endDate" // PropTypes.string.isRequired,
                onDatesChange={({ startDate, endDate }) => setStartAndEndDate(startDate, endDate)} // PropTypes.func.isRequired,
                focusedInput={focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
                onFocusChange={focusedInput => setFocusedInput(focusedInput)} // PropTypes.func.isRequired,
                orientation={orientation}
                withPortal={smallDevice}
                showClearDates
                showDefaultInputIcon
                hideKeyboardShortcutsPanel
            />
        </>
    );
}

Answer 1

If you don't mind exploring the DayPickerRangeController, i'm aware of two options for closing the calendar:

1. Passing a function that hides the Calendar UI to the onOutsideClick prop.

2. Rendering you custom button in a function and passing that function as the value to the renderCalendarInfo prop.

This function would exist as a member of the parent component that returns the DayPickerRangeController in its render function.

The function logic could simply be one that updates the internal component state with a bool that conditionally returns the DayPickerRangeController in the render method.

Sample code: https://gist.github.com/osifo/984cd60dce5d6abb49b6923ffa580638