React day picker overlay always on

user_4937897 0
Viewed 857

I am using DayPickerInput and I have it set up like this (Range with 2 day picker inputs). I want to always display overlay and I don't want to hide it. I am aware of showOverlay prop but it only displays overlay during the initial rendering and the overlay can be closed. Once closed it won't be opened by default again. Is it possible to have overlay always displayed using DayPickerInput or I should use DayPicker with my own input fields?

react-day-picker
2 Answers

This question is over 3 years old but in case someone stills looking for a way to do it now you can combine the props showOverlay and hideOnDayClick to have the overlay always on.

By doing something like this:

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

source - VERSION 7.4.8

user_78830670

If you're for some reason still looking for an answer, I found another tricky way of how to always show overlay.

What I've done is:

  1. Created measuredRef that replaces default hideDayPicker method with noop: 
    const measuredRef = useCallback(node => {
  if (node !== null) node.hideDayPicker = noop
}, [])
  2. Passed this ref to DayPickerInput together with showOverlay prop: 
    <DayPickerInput ref={measuredRef} showOverlay ... />

After this manipulations you'll have overlay that is always shown.

Furthermore, if you need to control DayPickerInput state, you can:

  1. Create useState: 
    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
  2. Use setIsDatePickerOpen the way you need (for example you want to hide overlay on day change): 
    <DayPickerInput
  ref={measuredRef}
  showOverlay
  onDayChange={() => setIsDatePickerOpen(false)}
  ...
/>
  3. Create custom OverlayComponent, pass it to DayPickerInput and control the way you show overlay: 
    const OverlayComponent = ({ children, classNames, selectedDay, ...props }) => 
(
 <div
   className={cn({
    "is-open": isDatePickerOpen,
   })}
   {...props}
 >
   {children}
 </div>
)

------------------------------

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