Date Picker onHide not calling delegate function

[bensullivan]

Describe the bug Hi - I am trying to use TypeScript (5.7.2) to call a function when the datepicker hides. For some reason it is not and I am not sure why.

To Reproduce

const $datepickerEl: HTMLInputElement = document.getElementById('myDatePicker') as HTMLInputElement;

const options: DatepickerOptions = {
    autohide: true,
    onHide: () => { console.log('Datepicker now hiding!'); }
};

const datepicker: DatepickerInterface = new Datepicker(
    $datepickerEl,
    options,
    null
);

Expected behavior Function delegated to by onHide should execute.

Desktop (please complete the following information):

• OS: macos 15.2
• Browser chrome
• Version 132

[nhwilly]

I'm trying to do this from Blazor. Same exact result. Thought for sure it was me/Blazor.

[FNICKE]

Troubleshooting the onHide Event in Datepicker

You're trying to trigger an onHide event in your TypeScript datepicker, but it's not working as expected. Let's break down the possible reasons and fixes in a simple and clear way.

---

Possible Reasons & How to Fix Them

1. Does Your Datepicker Library Support onHide?

• Not every datepicker has an onHide event. Check the official documentation of the library you're using (Bootstrap, Pikaday, Flatpickr, etc.).
• Some libraries use different event names, like hide or hidden.bs.datepicker. Try those if onHide isn't working.

2. Issues with Initialization

• The DatepickerInterface constructor might not be set up correctly.
• The third argument (null) in your code looks unnecessary—double-check if it's required.
• Make sure your options object has all the necessary properties.

3. Try Using an Event Listener Instead

• If onHide doesn't fire, adding an event listener manually might work better.

---

Updated Code Example

import { Datepicker, DatepickerOptions } from 'some-datepicker-library';

const $datepickerEl = document.getElementById('myDatePicker') as HTMLInputElement;

if ($datepickerEl) {
    const options: DatepickerOptions = {
        autohide: true,
        onHide: () => { console.log('Datepicker is now hiding!'); }
    };

    const datepicker = new Datepicker($datepickerEl, options);

    // Alternative: Add an event listener manually if onHide doesn’t work
    $datepickerEl.addEventListener('hide', () => {
        console.log('Datepicker is now hiding! (Detected via event listener)');
    });
} else {
    console.error('Could not find the datepicker element.');
}

---

Additional Debugging Tips

✔ Check for Errors in the Console

• Open DevTools (F12 > Console) and look for any errors related to your datepicker.

✔ Make Sure the Element Exists

• Before initializing, add console.log($datepickerEl); to confirm the element is actually found in the DOM.

✔ Test Other Events

• If onHide isn’t firing, try using onShow, onSelect, or onChange to see if the event system is working at all.

If you’re using a specific datepicker library, let us know so we can help with more precise troubleshooting! 🚀

[nhwilly]

I was using whatever date picker came with Flowbite. 🤷‍♂️

I was literally pasting the sample code. Date pickers behaved as expected, but without the events.

I put console write statements everywhere. I know it was initialized properly.

After 3 weeks without a response here, I had no choice but to move on.

Project can't wait.

Library looks pretty cool. Good luck with it.