是否可以持续显示 Airbnb 反应日期日历？

Question

I'm trying to have Airbnb's react-dates library display the calendar persistently (ie not have it act like a drawer/modal that toggles it's visibility).

I've looked through the documentation and noticed the appendToBody prop, but that just puts the DayPickerRangeController behind the input fields. It gets somewhat close, in that the calendar is somewhat CSS blocked, but it's still a drawer/modal that disappears.

I've looked through the CSS and can get the calendar to display inline-block basically when an input field is focused by removing the position: absolute CSS value on the DateRangePicker_picker div element. However, it still disappears when the input focus is lost.

The other approach I tried was to use the internal components that DateRangePicker is using (eg DateRangePickerInputController and DayPickerRangeController ). I am able to have more control from a visual layout standpoint, but I lose all built-in functionality that the DateRangePicker has in terms of selecting days/dates/ranges and sending that info back.

<DateRangePickerInputController
  readOnly 
  endDate={endDate} 
  endDateId="endDate" 
  endDatePlaceholderText="mm/dd/yyyy" 
  isEndDateFocused={focusedInput === 'endDate'}
  isStartDateFocused={focusedInput === 'startDate'}
  startDate={startDate} 
  startDateId="startDate" 
  startDatePlaceholderText="mm/dd/yyyy" 
/>
<DayPickerRangeController
  noBorder
  endDate={endDate} 
  focusedInput={focusedInput} 
  initialVisibleMonth={() => !startDate ? moment().subtract(1, 'M') : startDate }
  isOutsideRange={isOutsideRange.bind(this)} 
  minimumNights={0} 
  numberOfMonths={numberOfMonths}
  onDatesChange={onDatesChange.bind(this)} 
  onFocusChange={onFocusChange.bind(this)} 
  orientation={orientation}
  startDate={startDate} 
/>

As I mentioned, the elements render the way I want them to in that the calendar and inputs are persistent and stacked "on top" of each other.

And only 1 month shows up correctly, but when I click on a day in the calendar, the startDate input field does not update. Same for endDate . The hover highlighting over the days in the calendar is gone. And individual day highlights/coloring is gone when I click on them.

Answer 1

您可以使用props renderCalendarInfo并通过它传输DateRangePickerInputController 。