Listening for event from date picker

[MrSandvik]

Please forgive the noob-ness of this question, but I am wondering how I can listen for when a date is selected to call a function. In my case, I wish the page to reload with a new URI using the date when a selection occurs. (window.location.href = urlNew; // where urlNew is generated to include a Date-parameter based on the selected date)

[mymth]

According to https://mymth.github.io/vanillajs-datepicker/#/api?id=events

All Datepicker-event objects are ... dispatched to the associated <input> element ...

Here's a very basic example. https://codepen.io/mymth/pen/yLpWLZQ

[MrSandvik]

Thank you - that is really kind of you! I am but a toddler with JS still, and I learn best by examples. Loving your date picker amongst the dozen others I have tried

[mymth]

I updated the example to be easier for JS beginners to read and for you to catch the points.

[MrSandvik]

Thank you very much! I am incredibly grateful that you take the time :)

I made a small tweak to your code to allow for center positioning the picker relative to its parent element. Nothing fancy, but I kinda wanted it:

        if (inOpts.orientation) {
            const orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
            config.orientation = {
// Middle adjustment handler added ( || x === 'middle' ... 
                x: orientation.find(x => (x === 'left' _|| x === 'middle'_ || x === 'right')) || 'auto',
                y: orientation.find(y => (y === 'top' || y === 'bottom')) || 'auto'
            };

..and..

            let adjustment = 0;
            if (orientX === 'auto') {
                if (inputLeft < scrollAreaLeft) {
                    orientX = 'left';
                    adjustment = scrollAreaLeft - inputLeft;
                } else if (inputLeft + calendarWidth > scrollAreaRight) {
                    orientX = 'right';
                    if (scrollAreaRight < inputRight) {
                        adjustment = scrollAreaRight - inputRight;
                    }
                } else if (getTextDirection(inputField) === 'rtl') {
                    orientX = inputRight - calendarWidth < scrollAreaLeft ? 'left' : 'right';
                } else {
                    orientX = 'left';
                }
            }
            if (orientX === 'right') {
                left += inputWidth - calendarWidth;
            }

// If 'middle' defined for X; center calendar -- _only adjusting for left < 0_
            if (orientX === 'middle') {
                left += (inputWidth / 2) - (calendarWidth / 2);
                _if (left < 0) {
                    left = 0;_
                }
            }

            left += adjustment;

            // determine the vertical orientation and top position
            if (orientY === 'auto') {
                if (inputTop - calendarHeight > scrollAreaTop) {
                    orientY = inputBottom + calendarHeight > scrollAreaBottom ? 'top' : 'bottom';
                } else {
                    orientY = 'bottom';
                }
            }
            if (orientY === 'top') {
                top -= calendarHeight;
            } else {
                top += inputHeight;
            }

            classList.remove(...Object.values(orientClasses));
            classList.add(orientClasses[orientX], orientClasses[orientY]);

            style.left = toPx(left);
            style.top = toPx(top);
        }

[MrSandvik]

So I can't add underlines within code.. I tried to make a couple of highlights.