5 ms·

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 mobil

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.

httgp 6y ago
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.
ramraj07 6y ago
What is the best date picker you have ever used?
- thomasfedb 6y ago
  So far the most consistent behaviour is two <select> tags for hours and minutes.
  - jhabdas 6y ago
    At that, sounds like Chakra is feature-complete with regard to time picking .
santialbo 6y ago
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.
- chank 6y ago
  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.
shripadk 6y ago
material-ui fits the bill: https://material-ui.com/components/pickers/ https://material-ui.com/components/pickers/
- thomasfedb 6y ago
  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.
  - shripadk 6y ago
    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/ 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 https://material-ui-pickers.dev/demo/timepicker And it is accessible too!
    - thomasfedb 6y ago
      Right, sorry. Headings on that page had me confused (they still do...) but I believe you.
    - lenkite 6y ago
      Can you give your opinion on how that compares to Vuetify's date picker here: https://vuetifyjs.com/en/components/date-pickers/ https://vuetifyjs.com/en/components/date-pickers/ ?
agustif 6y ago
I've used ant/design's in the past. Desktop https://ant.design/components/date-picker/ https://ant.design/components/date-picker/ Mobile https://mobile.ant.design/components/date-picker-view/ https://mobile.ant.design/components/date-picker-view/ https://mobile.ant.design/components/date-picker/ 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.
- bookaway 6y ago
  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.

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.

httgp 6y ago

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.

ramraj07 6y ago

What is the best date picker you have ever used?

thomasfedb 6y ago
So far the most consistent behaviour is two <select> tags for hours and minutes.
- jhabdas 6y ago
  At that, sounds like Chakra is feature-complete with regard to time picking .

santialbo 6y ago

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.

chank 6y ago
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.

shripadk 6y ago

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

thomasfedb 6y ago
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.
- shripadk 6y ago
  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/ 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 https://material-ui-pickers.dev/demo/timepicker And it is accessible too!
  - thomasfedb 6y ago
    Right, sorry. Headings on that page had me confused (they still do...) but I believe you.
  - lenkite 6y ago
    Can you give your opinion on how that compares to Vuetify's date picker here: https://vuetifyjs.com/en/components/date-pickers/ https://vuetifyjs.com/en/components/date-pickers/ ?

agustif 6y ago

I've used ant/design's in the past. Desktop https://ant.design/components/date-picker/ https://ant.design/components/date-picker/ Mobile https://mobile.ant.design/components/date-picker-view/ https://mobile.ant.design/components/date-picker-view/ https://mobile.ant.design/components/date-picker/ 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.

bookaway 6y ago
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.