Datepicker is flaky

[dreeves]

Desiderata

Beta Give feedback

1. Gather candidate datepicker replacements
2. TBD

HT rperce:

Tabbing out of the date field made it discard my changes, but clicking out didn't? Made for a frustrating time setting up my new book-reading goal! I got it to work though.

I've noticed this as well. There's something frustrating/annoying/buggy with the datepickers.

Cognata

• https://github.com/Pikaday/Pikaday (status quo ante)
• https://github.com/beeminder/beeminder/issues/1432
• https://github.com/beeminder/beeminder/issues/1376
• https://github.com/beeminder/beeminder/issues/925
• https://stripe.com/docs/stripe-apps/components/datefield

Verbata: date picker, datepicker, UI annoyances, user frustration,

[dreeves]

It would be nice to have replicata but also maybe the answer is just swapping in a better off-the-shelf datepicker?

[rperce]

...did anything change around the datepicker, uh, yesterday? I went to go make replicata and can't get it to fail in the same way as it was before. I'm using a different environment, though, than when I reported the bug originally—I'm using my work partition ATM—so I'll try again when I get home (which, ok, I'll be sitting in the precisely the same chair, but booted into my home partition). Maybe there's some firefox setting or extension that differs! Nota Nebulosa: my home browser has third-party scripts disabled by default (with uBlock Origin), so that'll be my first look. Is some part of the datepicker functionality served third-party?

[dreeves]

Thanks again for bug reporting and experimenting/diagnostics! Nothing changed recently, and it looks like we're using pikaday with no calls to third parties.

[dreeves]

Ideas from ChatGPT:

1. Flatpickr: Lightweight, powerful, and highly customizable.
2. React-Datepicker: Ideal for React applications, flexible and customizable.
3. Airbnb's react-dates: Focuses on usability and internationalization for React.
4. Date-fns: Comprehensive date manipulation utilities, can be paired with various UI components.
5. Bulma Calendar: Integrates seamlessly with the Bulma CSS framework.
6. Ant Design DatePicker: Part of Ant Design, offers a sleek design and extensive features for React.
7. Vuetify Date Picker: Designed for Vue.js applications, integrates with the Vuetify framework.
8. Material-UI Pickers: Components for date and time picking, designed for React applications using Material-UI.