-1

我正在尝试让 Airbnb 的 react-dates 库持续显示日历（即不要让它像抽屉/模式那样切换它的可见性）。

我查看了文档并注意到了appendToBody道具，但这只是将DayPickerRangeController输入字段放在后面。它有点接近，因为日历有点被 CSS 阻止，但它仍然是一个消失的抽屉/模式。

我已经查看了 CSS，并且可以通过删除div 元素上的 CSS 值来使日历inline-block基本上在输入字段获得焦点时显示。但是，当输入焦点丢失时，它仍然会消失。position: absoluteDateRangePicker_picker

我尝试的另一种方法是使用正在使用的内部组件DateRangePicker（例如DateRangePickerInputController和DayPickerRangeController）。DateRangePicker从视觉布局的角度来看，我可以进行更多控制，但是我失去了在选择日期/日期/范围和发回该信息方面的所有内置功能。

<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} 
/>

正如我所提到的，这些元素按照我想要的方式呈现，因为日历和输入是持久的并且彼此“堆叠”在一起。

并且只有 1 个月正确显示，但是当我单击日历中的一天时，startDate输入字段不会更新。对endDate. 突出显示日历中日期的悬停已消失。当我点击它们时，个别日子的亮点/着色消失了。

4

1 回答 1

2

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

于 2020-02-20T08:05:23.590 回答