Date and Time Picker

Modernized: https://gitlab.com/tikiwiki/tiki/-/merge_requests/4879

Use cases

• Tracker date and datetime fields.

Desired features

Essential

• Compatible License (We can ask for relicense, as we have done this many time with success.)
• Bootstrap and responsive (and works well in touch interface) (and move away from jQuery UI)
• Date picker, and optional time picker

Ideally

• Handling for TimeZones (If widget doesn't support it, we can just use a distinct field)

Candidates

https://patternslib.com/demos/date-picker

https://www.avonnicomponents.com/components/date-time-picker/

https://carbondesignsystem.com/components/date-picker/usage/

https://nhn.github.io/tui.date-picker/latest/tutorial-example04-having-timepicker

• Pros
  • Offers an optional time picker
  • Support internationalization
  • Customizable
• Cons
  • No alt field support
  • No timezone picker
• Stats
  • Over 2.3k usages
  • 92 stars
  • Last updated 2 years ago

https://github.com/t1m0n/air-datepicker

• Pros
  • Cool animations if the user prefers animations 😊
  • Mild-activity on the repository (as of now, the last commit has been made 7 months ago)
  • Lightweight
  • Support keyboard navigation
  • Responsive
  • customizable
  • Detailed documentation
  • Doesn't depend on any external library
  • Popular (2.5k star on gitHub)
  • Alt field support
• Cons
  • Doesn't provide a timezone picker.

https://github.com/mymth/vanillajs-datepicker

• Pros
  • Keyboard navigation
  • Doesn't depend on any external library
  • Lightweight — 35kB (minified, uncompressed, 11kB when gzipped)
  • Active repository (as of now, the last commit has been made 3 months ago)
  • Alt field support
• Cons
  • Doesn't offer neither a timer nor a timezone picker

https://github.com/amsul/pickadate.js

• No activity on GitHub (last commit since 5 years ago)

https://flatpickr.js.org

• no dependencies and supports and alt input which we need to store the unix timestamp
• doesn't show activities on GitHub for quite some time, not sure if it's still maintained.

https://github.com/Eonasdan/tempus-dominus

• uses https://packagist.org/packages/moment/moment
• Note sure it supports bootstrap 4?

https://github.com/eternicode/bootstrap-datepicker/blob/master/composer.json

• Also seems to be only for bootstrap 3 or 2

Available options in Vuejs

https://github.com/Vuepic/vue-datepicker

• Pros
  • Timezones handling
  • Clear and well detailed documentation
  • High activity on the repo
• Cons
  • No alt field support

https://github.com/chronotruck/vue-ctk-date-time-picker

• Pros
  • Time handling
• Cons
  • No alt field support
  • The documentation doesn't cover the customization of the component
  • Animations that cannot be disabled (which can be quite tedious)
  • There has been no activity on the repo for the past 4 years.

Likely to be picked

We want a library that provides a timezone picker but none of the options mentioned above provide this functionality out of the box, thus, I would go for air-datepicker and integrate timezone handling to suit our need.

Previously

• http://trentrichardson.com/examples/timepicker/#timezone_examples (used in Tiki as of 2017-03 but abandoned some years ago )

Source: http://blog.jqueryui.com/2016/09/jquery-ui-1-12-1/