如何添加关闭按钮以关闭反应日期的日历？

Question

我正在使用爱彼迎提供的反应日期。它非常适合桌面和移动视图。

唯一的问题是当我在移动视图上呈现日历时。有什么方法可以为日历创建关闭按钮吗？

这是它在我的移动视图中的样子：

我想要的是右上角的关闭[X]按钮来关闭日历。现在我需要选择关闭之前的日期。

我的 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

如果您不介意探索 DayPickerRangeController，我知道关闭日历的两个选项：

将隐藏日历 UI 的函数传递给 onOutsideClick 属性。
在函数中呈现自定义按钮并将该函数作为值传递给 renderCalendarInfo 属性。

此函数将作为父组件的成员存在，returns DayPickerRangeController 在其 render 函数中。

函数逻辑可以简单地是使用布尔值更新内部组件状态的逻辑，该布尔值有条件地 returns render 方法中的 DayPickerRangeController。

示例代码： https://gist.github.com/osifo/984cd60dce5d6abb49b6923ffa580638

如何添加关闭按钮以关闭反应日期的日历？

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

reactjs

react-dates