Как поставить кнопку закрытия, чтобы закрыть календарь на даты реакции от airbnb? - PullRequest
Новая
       57

Как поставить кнопку закрытия, чтобы закрыть календарь на даты реакции от airbnb?

0 голосов
/ 16 января 2020

Я использую react-dates предоставленный airbnb. Он прекрасно работает для настольного и мобильного просмотра. Единственное, когда я отображаю календарь в мобильном представлении, есть ли способ создать кнопку закрытия для календаря?

Вот как это выглядит на моем мобильном представлении:

enter image description here

Мне нужна кнопка закрытия [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
            />
        </>
    );
}

Спасибо за помощь!

1 Ответ

0 голосов
/ 16 января 2020

Если вы не возражаете против изучения DayPickerRangeController, мне известны два варианта закрытия календаря:

  1. Передача функции, которая скрывает пользовательский интерфейс календаря, в onOutsideClick prop.

  2. Отображение вашей пользовательской кнопки в функции и передача этой функции в качестве значения renderCalendarInfo prop.

This функция будет существовать как член родительского компонента, который возвращает DayPickerRangeController в своей функции render.

Функция logi c может просто быть той, которая обновляет состояние внутреннего компонента с помощью bool, который условно возвращает DayPickerRangeController в методе render.

Пример кода: https://gist.github.com/osifo/984cd60dce5d6abb49b6923ffa580638

...