Hacker News Reader

Comment by thomasfedb | Hacker News Reader

The component I always look for in these libraries is a date picker (and also a time picker). I've never found one that actually works well on desktop and mobile and can be used with a keyboard.

View on HN

I have mixed feelings about more advanced components like datepickers because they always make quite opinionated choices:

- do they use moment, date-fns, ?

- do they favor an easier and rigid API or a more complex but customizable?

- do they allow custom i18n? Most of the ones you find out there have English hardcoded in.

All of these reasons usually make me go the route of building my own one.

Honestly though. Every third party framework or component you use is going to have an opinion. Your only choice is if that opinion aligns with yours or not.

I've used ant/design's in the past.

Desktop https://ant.design/components/date-picker/

Mobile https://mobile.ant.design/components/date-picker-view/ https://mobile.ant.design/components/date-picker/

But for mobile I ended up using react-device-detect and going with customized regular ol' html inputs, iOS is such a pain otherwise... and it worked well for iOS/Android.

On Desktop, I look for a time picker where the top-down arrows on the keyboard work to change the numbers on the hour-minute-second slots. The ant design time picker showcase doesn't work like this it seems.

Same, I use Chakra-UI in a production-grade app and I hit a wall with a date and time picker. I had to build my own with Downshift, but getting it to work correctly on all resolutions and with react-hook-forms was tedious and time-consuming.

material-ui fits the bill: https://material-ui.com/components/pickers/

They just use the native picker, which is often a very reasonable choice, but presents problems. For example, I might want to use 24-hour time in an application (e.g. emergency services logistics) and not all browsers will permit this.

No. They don't use the native picker only (they provide it as an alternative). Their very first demo is of custom picker implementation using date-fns (which can be replaced with another one of your choice: Bring your own date management library).

Linking directly to a dedicated page they have for Material UI Pickers: https://material-ui-pickers.dev/

> For example, I might want to use 24-hour time in an application (e.g. emergency services logistics) and not all browsers will permit this.

24-hour time picker implementation: https://material-ui-pickers.dev/demo/timepicker

And it is accessible too!

Right, sorry. Headings on that page had me confused (they still do...) but I believe you.

Can you give your opinion on how that compares to Vuetify's date picker here: https://vuetifyjs.com/en/components/date-pickers/ ?

What is the best date picker you have ever used?

So far the most consistent behaviour is two <select> tags for hours and minutes.

At that, sounds like Chakra is feature-complete with regard to time picking .

Reply on news.ycombinator.com