Flowbite datepicker onShow and onHide don't get fired

[origaminh]

I'm trying out the flowbite datepicker component with the TypeScript implementation (used within an angular project), and am encountering the issue of not having the onShow and onHide events firing properly. The onShow event only gets fired when datepicker.show() is manually called. The "show" method is not even available within the DatepickerInterface.

The problem is demonstrated in the following stackblitz:
https://stackblitz.com/edit/stackblitz-starters-2mjgne?file=src%2Fexample-form%2Fexample-form.component.ts

[wimurk]

I have the same issue. The datepicker is unusable without the events triggered from the inputs. I have to call the hide and show manually

[yannic-md]

same.

[bigbasti]

just ran into this issue too - how is this even released? Cant use the datepicker at all when events are not fired.

[carloscolombo]

Here is a work around if it hasn't been fixed yet.

// the target element
const targetEl = this._el.nativeElement;

// create the instance
const datePicker = new Datepicker(
  targetEl,
  {
     // your datepicker options, omit onShow and onHide
  },
  {
     // other instance options
   }
);

// add listeners
targetEl.addEventListener('show', () => {
  // do something on show
});

targetEl.addEventListener('hide', () => {
  // do something on hide
});

Basically a CustomEvent is emitted on the target element so just add an event listener for either show or hide.

The show event that is emitted from the source code:

flowbite-datepicker/js/picker/Picker.js

Line 198 in 447b298

triggerDatepickerEvent(datepicker, 'show');

The hide event that is emitted from the source code:

flowbite-datepicker/js/picker/Picker.js

Line 209 in 447b298

triggerDatepickerEvent(this.datepicker, 'hide');

Not the best but it got me past this issue.