Flatpickr: Support for the picker to be triggered by other element

[overtune]

Hi!

For a project I needed to trigger the Flatpickr with an button instead of the input field.
Some reason for this is for accessibility, where people with screenreaders doesn't get much support from a datepicker. There it's much better to just let them enter a date with a standard text input.

So when the Flatpickr can be triggered with a button instead, that button can be hidden from screenreaders (aria-hidden="true") and that will give people with screenreaders the option to just enter text.

I did a simple fix in the Flatpickr codebase to add an config for "triggerElement", which should be a DOM node. If that element is set the Flatpickr will be triggered by clicking the "triggerElement" instead of input.focus().

Are you interested in a Pull-request with this?

Thanks for a great plugin!

[chmln]

edit: have you tried using .open() ?

[overtune]

Yes, first I just tested with the open() method, and it works.
But, when the input is triggered with an button, I don't want the input to also trigger the picker.
I would like the input to function as an standard input (where you just can enter text).
This way it would be usable for people with screenreaders, and the flatpickr would make a great compliment for those who needs it.

I did a Pull-request, where I also added a demo in index.html so you can check it out:
https://github.com/chmln/flatpickr/pull/39

Just let me know if I did something the wrong way or so (I'm new to Github and Pull-requests).

Thanks!

[chmln]

Thank you for inspiration.

I've added custom markup possibility and 4 custom trigger elements: open, close, toggle, and clear.
Check out the example on the website!

If I left anything unaddressed, feel free to re-open or create a new issue.