Toggle Button

ui.toggleButton takes a selector or an element. A click on it opens the picker, in addition to the input. The picker sets aria-expanded on the button, and its accessible name comes from your markup, so give it an aria-label.

1<input id="date" />
2<button id="open-date" type="button" aria-label="Choose date">...</button>

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { toggleButton: "#open-date" },
6}).create();