Closing modal to reset date selection

[db-qc]

Hi!

So I had something I thought would be quite simple to achieve. Currently, when the modal is closed, the date selection currently selected is set. What I wanted to do was when the modal is closed (i.e. without hitting 'apply'), I wanted to cancel the current selection.

I have tried resetting the picker.element.val using picker.oldStartDate and picker.oldEndDate when onHide was called, which kind of works but this causes a problem when I try and use onApply as onHide called before on apply.

I tried using onEvent but that's fired twice, so even if I'm listening to a certain event it fires twice.

What I'd really like to achieve is replicating exactly what the 'Cancel' button does - which I thought would be simple :D

Does anyone have an idea on how to do this?

[skratchdot]

view the story details for "change initialSettings (range data)": https://projects.skratchdot.com/react-bootstrap-daterangepicker/?path=/story/daterangepicker--change-initialsettings-range-data

you probably need to make use of a ref.

const keyRef = useRef(Date.now());

and make sure you put that in your picker

return <DateRangePicker key={keyRef.current} />

anytime you want to render the picker with 'fresh initialSettings', just update the ref. it's a hacky workaround due to this not being a typical controlled react component.

[emanuallan]

Here's what worked for me in the onHide prop

(pickerRef as any).current.$picker
        ?.data('daterangepicker')
        ?.setStartDate(date);
      (pickerRef as any).current.$picker
        ?.data('daterangepicker')
        ?.setEndDate(date);