[英]How to put close button to close calender on react-dates from airbnb?
我正在使用 airbnb 提供的react-dates
。 它非常适合桌面和移动视图。 唯一的问题是当我在移动视图上渲染日历时,有什么办法可以为日历创建一个关闭按钮?
这是它在我的移动视图上的外观:
我想要的是右上角的关闭 [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
/>
</>
);
}
谢谢您的帮助!
如果您不介意探索DayPickerRangeController
,我知道关闭日历的两个选项:
将隐藏日历 UI 的函数传递给onOutsideClick
道具。
在函数中呈现自定义按钮并将该函数作为值传递给renderCalendarInfo
道具。
此函数将作为在其render
函数中返回DayPickerRangeController
的父组件的成员存在。
函数逻辑可以简单地使用一个布尔值更新内部组件状态,该布尔值在render
方法中有条件地返回DayPickerRangeController
。
示例代码: https : //gist.github.com/osifo/984cd60dce5d6abb49b6923ffa580638
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.