
Show HN: Aeon – a lightweight date picker built with web components - lamplightdev
https://github.com/lamplightdev/aeon
======
lamplightdev
I needed a progressively enhanced, lightweight date and time picker that
functioned and looked consistent across all browsers, and that worked with or
without a framework. The difference in support (no native picker on desktop
Safari) style and behaviour of native pickers rule them out, so web components
seemed an obvious choice. The existing web component solutions tended to be
too heavyweight, so Aeon was born:

\- No dependencies - a standalone vanilla JS web component

\- Lightweight - 5kb gzipped

\- Use anywhere - use standalone or directly in your framework of choice with
no wrappers

\- Progressive enhancement - if the code fails to load, fallbacks to a native
picker or a simple text box

\- Accessible - works with mouse/touch/keyboard/screen readers and behaves as
a native form element

\- Locale aware - uses the browser locale language and date format by default

\- Themeable - pass in custom colour schemes

\- Browser support - works in all modern browsers on all devices (and IE11 -
with polyfills)

~~~
zichy
Good job so far, it feels very lightweight and simple. It works well with
different input devices, but the accessibility for screen readers could be
improved:

* The first day immediately gets focused when opening the datepicker. It might be a bit confusing to just hear a number.

* There's enough space to spell the months in full.

* Use semantic abbrevations for weekdays, e.g. `<abbr title="Monday">Mo</abbr>`.

* Use `label`s which refer to the corresponding `select`.

* Use `table` instead of `div`s for the calendar view.

* Use (hidden) text instead of the `title` attribute in buttons.

Furthermore:

* Try using more unique classes for your elements, e.g. '.aeon-datepicker__select' instead of '.select'.

* `cursor: pointer` for buttons would be helpful to see how large the click area is.

~~~
lamplightdev
Thanks for these pointers, very useful indeed - I'll look to address them in
the next update.

------
leshokunin
Looks really pretty. In the storybook example, it looks like it doesn’t like
being put in a small viewport, but that’s more the page’s fault.

~~~
lamplightdev
Thanks! The Storybook doesn't work too well on smaller viewports, but the
picker does work well on small screens in regular pages, e.g.
[https://lamplightdev.github.io/aeon/](https://lamplightdev.github.io/aeon/)

------
mr_november
Looks cool, nice work. Couple pieces of feedback:

\- typically the check mark/ok button is on the right side and the cancel is
on the left, in the date picker it’s swapped

\- not clear to me what the 2 different cancel buttons do, one a solid x, the
other just an x

~~~
lamplightdev
Thanks for the feedback. I agree the meaning of the icons is unclear - one is
cancel, the other is clear. I would prefer to have text on these buttons, but
then localising the language becomes an issue. I will think over these issues!

------
ddgflorida
How about selecting a date by double-clicking on it?

~~~
lamplightdev
Nice idea, although I think the difficult thing is how to make that obvious to
the user as it's not a standard way to select something.

------
winrid
The UX on mobile is really good!

~~~
lamplightdev
Thanks! That was a key requirement for my use case, so I appreciate the
feedback.

