Search code examples
reactjsreact-day-picker

react-day-picker without overlay (input field only)

Wanting to leverage some of the built in functionality (date validation, etc) of react-day-picker while not offering the calendar overlay (offering the user an input field without the calendar overlay).

I'm not seeing any options in the docs to show only the input field without the calendar overlay.

Am I missing something?

Solution

  • Maybe a hacky way but I can see that you can provide custom prop classNames to the DayPickerInput component. Source

    And you could provide an object like

    <DayPickerInput>
    classNames={{
       overlayWrapper: 'myCustomClass'
    }}
/>

.myCustomClass {
    display: none;
}

    or if you can hide the default class for the overlay wrapper

    .DayPickerInput-OverlayWrapper {
    display: none!important;
}