react-day-picker - 反应日期选择器覆盖始终打开

Question

我正在使用 DayPickerInput 并且我将它设置为这样（范围与 2 天选择器输入）。我想总是显示覆盖，我不想隐藏它。我知道showOverlay道具，但它只在初始渲染期间显示叠加，并且可以关闭叠加。关闭后默认不会再打开。是否可以始终使用 DayPickerInput 显示叠加层，或者我应该将 DayPicker 与我自己的输入字段一起使用？

Answer 1

这个问题已经超过 3 年了，但如果有人现在还在寻找一种方法，你可以结合道具 showOverlay 和 hideOnDayClick 让覆盖始终打开。

通过做这样的事情：

<DayPickerInput showOverlay hideOnDayClick={false} ... />

来源 - 版本 7.4.8

Answer 2

如果您出于某种原因仍在寻找答案，我发现了另一种如何始终显示叠加层的棘手方法。

我所做的是：

1. 创建了用noop替换默认方法的measureRef： hideDayPicker

   const measuredRef = useCallback(node => {
     if (node !== null) node.hideDayPicker = noop
   }, [])
   

2. DayPickerInput将此 ref与showOverlayprop 一起传递：

   <DayPickerInput ref={measuredRef} showOverlay ... />
   

完成此操作后，您将获得始终显示的叠加层。

此外，如果您需要控制DayPickerInput状态，您可以：

1. 创建useState：

   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
   

2. 使用setIsDatePickerOpen您需要的方式（例如，您想在日期变化时隐藏叠加层）：

   <DayPickerInput
     ref={measuredRef}
     showOverlay
     onDayChange={() => setIsDatePickerOpen(false)}
     ...
   />
   

3. 创建 custom OverlayComponent，将其传递给DayPickerInput并控制您显示叠加层的方式：

   const OverlayComponent = ({ children, classNames, selectedDay, ...props }) => 
   (
    <div
      className={cn({
       "is-open": isDatePickerOpen,
      })}
      {...props}
    >
      {children}
    </div>
   )
   
   ------------------------------
   
   <DayPickerInput
     ref={measuredRef}
     showOverlay
     onDayChange={() => setIsDatePickerOpen(false)}
     overlayComponent={OverlayComponent}
     ...
   />