Event for open and close date picker

Question

I am using https://easepick.com date range picker.

I am looking for the event in which event can be fire on opening of the date range picker and also fire when close the range picker.

If I can find the event for both then I want to resize the Iframe height on opening of range picker and on close I want to reset my iframe size.

Answer 1

Easypick provides the following 5 events:

Name	Description
render
view
preselect	Event is called on select days (before submit selection). When autoApply option is false.
select	Event is called when selection is submitted.
clear

---

You can use the select event to trigger the CLOSE action, this will trigger if the user selects a date.

Unfortunately there is no OPEN event, so your best option is to add a native click event on the DOM <input>.

document.querySelector('#datepicker').addEventListener('click', () => {
    console.log('Open');
});

const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    css: [
      'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
    ],
    setup(picker) {
        picker.on('select', (e) => {
            console.log('Close');
        });
    },
});

<input id="datepicker"/>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>