Skip to content

Switch the date picker library to a better alternative #10971

@ahukkanen

Description

@ahukkanen

Describe the bug

Currently we are using an abandoned library for the date picker elements:
https://github.com/najlepsiwebdesigner/foundation-datepicker

This library has some problems and also it does not support the North American time format for AM/PM dates.

The redesign changed these fields to default datetime-local fields provided by the HTML specification:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

But this is problematic for the accessibility technologies because the support for different assistive technologies lacks behind the HTML specification, so we cannot achieve full compatibility using those elements:
https://a11ysupport.io/tech/html/input(type-datetime-local)_element

To Reproduce

  1. Go to a meetings component (also available in other views)
  2. Create a new meeting
  3. See the start/end time fields displaying the date/time picker

Expected behavior

I would expect the library to be well maintained.

We recently developed a module that customizes the date/time formats to the US / North American style, available at this module:
https://github.com/Pipeline-to-Power/decidim-module-ptp/tree/main/decidim-l10n

In that module we decided to use Flatpickr which was lightweight and provided the feature for AM/PM time picking:
https://github.com/flatpickr/flatpickr

It worked well for that purpose and the integration was rather simple:
https://github.com/Pipeline-to-Power/decidim-module-ptp/blob/ce074e27fb253d10461ef6bf5d69c55ae4993436/decidim-l10n/app/packs/src/decidim/form_datepicker.js#L18-L25

The library seems to be somewhat popular but the commit activity is not very high in the recent months and it seems it might be dying, see:

Screenshots

No response

Stacktrace

No response

Extra data

  • Device:
  • Device OS:
  • Browser:
  • Decidim Version:
  • Decidim installation:

Additional context

Acceptance criteria for the new component:

  • Supports different date formats, based on the user settings (selected locale)
  • Has i18n support (e.g. for the month names or any other UI strings)
  • Supports time picking
  • Can be configured either as a date-only picker or date+time picker
  • Supports North American time picking format (AM/PM)
  • Easy to use and intuitive
  • Works across all major browsers without issues
  • Requires little to no changes in the Decidim internal styles (i.e. ships with sensible styling)
  • Supports easy theme customization through CSS, e.g. changing the colors, etc.

We should create a comparison table for all potential solutions passing these criteria based on the following example:
#8683 (reply in thread)

Metadata

Metadata

Labels

dependenciesPull requests that update a dependency file or issues that talk about updating dependencies

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions