[英]How to put close button to close calender on react-dates from airbnb?
I am using react-dates
provided from airbnb.我正在使用 airbnb 提供的
react-dates
。 It works perfect for desktop and mobile view.它非常适合桌面和移动视图。 The only thing is when i render calender on mobile view, is there any way i can create a close button for the calender?
唯一的问题是当我在移动视图上渲染日历时,有什么办法可以为日历创建一个关闭按钮?
This is how its look on my mobile view:这是它在我的移动视图上的外观:
What i want is a close [X] button on the upper right corner to close the calender.我想要的是右上角的关闭 [X] 按钮来关闭日历。 Now i need to choose dates before its closed.
现在我需要在关闭之前选择日期。
My code for DatePickerRange
:我的
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
/>
</>
);
}
Thanks for the help!谢谢您的帮助!
If you don't mind exploring the DayPickerRangeController
, i'm aware of two options for closing the calendar:如果您不介意探索
DayPickerRangeController
,我知道关闭日历的两个选项:
Passing a function that hides the Calendar UI to the onOutsideClick
prop.将隐藏日历 UI 的函数传递给
onOutsideClick
道具。
Rendering you custom button in a function and passing that function as the value to the renderCalendarInfo
prop.在函数中呈现自定义按钮并将该函数作为值传递给
renderCalendarInfo
道具。
This function would exist as a member of the parent component that returns the DayPickerRangeController
in its render
function.此函数将作为在其
render
函数中返回DayPickerRangeController
的父组件的成员存在。
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.函数逻辑可以简单地使用一个布尔值更新内部组件状态,该布尔值在
render
方法中有条件地返回DayPickerRangeController
。
Sample code: https://gist.github.com/osifo/984cd60dce5d6abb49b6923ffa580638示例代码: https : //gist.github.com/osifo/984cd60dce5d6abb49b6923ffa580638
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.