How to make the range picker auto close itself ?

[Hirshfeld]

Hi, I would like to know if there is a way to make the DateRangePicker window close once the user clicked outside of the date time picker element - when the range picker lost focused. For example, a user opened the date time picker. he then he clicked on some image the page. the range picker element should automatically close itself. like in common modal windows.

steps to reproduce:

1. open the date time picker.
2. click on a different element in the page.
3. the date time picker window stays open and doesn't close itself.

Expected behaviour: the window should be closed.

thanks

[ofirk12]

any solutions for that?

[leo-castro]

Wrap it with a modal component. Here's an example using react-boostrap:

<OverlayTrigger rootClose trigger='click' overlay={
    <Popover>
        <Popover.Content>
            <Calendar
                date={new Date()}
                onChange={
                    (value)=>{
                        console.log(value)
                    }
                }
            />
        </Popover.Content>
    </Popover>
}>
    <Button>Open Calendar</Button>
</OverlayTrigger>

[iamrraj]

So, I have finally able to close the date range once you select the date. here is the working code hope this will help you to solve your problem.

https://codesandbox.io/s/react-date-range-autoclose-forked-s5fjm?file=/src/DateRangeFilter.js