Loading...
 
Skip to main content

History: Date and Time Picker

Source of version: 21 (current)

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

!! Use cases
* Tracker date and datetime fields.

!! Desired features
!!! Essential
* Compatible ((tw: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 [https://air-datepicker.com/docs|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 [https://github.com/flatpickr/flatpickr|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 [https://vue3datepicker.com/installation|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{sign user="mercijacob" datetime="2024-02-16"} 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 {sign user="jonnybradley" datetime="2021-03-15T15:01:47+00:00"})

{QUOTE(replyto="jQuery UI 1.12.1 release blog post")}The Road Ahead

In parallel to this release we’ve been working on several significant rewrites that will make it into future releases:

Datepicker and Globalize: We’re working on a full rewrite of the datepicker widget. The rewrite will feature a far simpler API that will make customizations a lot easier. The rewrite builds on top of the rewritten [https://github.com/jquery/globalize|Globalize library], which builds on top of CLDR, a comprehensive source for globalization data.{QUOTE}
Source: http://blog.jqueryui.com/2016/09/jquery-ui-1-12-1/
Show PHP error messages