PLIP: New datetime and date widgets

[thet]

Responsible Persons

Proposer: Johannes Raggam @thet

Seconder: Jens Klein @jensens

Abstract

This PLIP is about changing our date/time input widgets from mockup-pattern-pickadate, based on pickadate.js to Patterns' pat-datetime-picker based on Pikaday.

Motivation

Our current date and time picker is based on pickadate.js (240 watchers, 7354 stars, 975 forks).

It has some usability problems:

• It doesn't easily allow free date or time inputs (There were some discussions about allowing this. In the meantime there is an option, but then you have to add calendar bindings yourself.).

• It doesn't do progressive enhancement by using a native widget if available in browser.

• The time picker allows the selection of a time in configurable increments. This is inflexible or results in a much too long list to choose from.

Instead of using above, I propose to switch to pat-datetime-picker respectively pat-date-picker from the Patterns library. It uses Pikaday (186 watchers, 6104 stars, 1222 forks), which is similar but slightly less popular than pickaday.

The advantages are:

• Progressive enhancement which allows to use the native pickers (Support see: https://caniuse.com/#search=datetime ).
• Possible to type date and time values into the input without being forced to use the widget.
• There is no time picker.
• It has smaller payload (5kB vs ~ 38kB).
• It has a easier API.
• It makes use of moment.js, if available.

Assumptions

• Pikaday is really the date picker we want instead of pickadate.

~~- PLIP 1653 is accepted and implemented. This PLIP will depend on Patternslib integrated into Plone. See: https://github.com/plone/Products.CMFPlone/issues/1653~~ << NOT a precondition

Proposal & Implementation

I'm currently preparing an integration into Plone via https://github.com/plone/plone.patternslib/pull/23 for use in a project.

For this PLIP the implementation would be like outlined below:

• The patterns are provided by the Patterns library.
• PLIP 1653 is accepted and implemented, so that the Patterns library can be used in Plone.
• No datepicker will be provided.
• The input fields types will be changed to date respectively datetime-local. Native widgets will make use of it.
• For the Date/Time picker, the original input field will be replaced by a date and a time input field - again with their HTML5 types which browser-native widgets can make use of.
• The original input field will be hidden and updated after each change. This one is used for form submission.
• The patterns will be initialized with the option to make use of the browser-native widget instead of the polyfill widgets if available.
• The datetime widget converters will be changed to support the HTML5 datetime-local compatible ISO 8601 format (https://en.wikipedia.org/wiki/ISO_8601, omitting seconds and the UTC offset). Currently it's not ISO 8601 compatible.

Deliverables

• Patternslib/Patterns#520 pat-datetime-picker.
  • [x] Merged in 2.1.x branch
  • [ ] Needs release for 2.1.x
  • [ ] Merge forward port for master Patternslib/Patterns#575
  • [ ] Needs release for 3.0.x
• plone/mockup#845: Use pat-date-picker in the querystring pattern, deprecate mockup-patterns-pickadate in docs and eventually remove it.
  • [ ] Merge PR
• plone/plone.app.upgrade: Add new resource-registry registration
  • [ ] Implement and create PR
  • [ ] Merge PR
• plone/plone.app.z3cform#90: Change date input type to date and datetime input type to datetime-local and use pat-date-picker resp. pat-datetime-picker.
  • [ ] Merge PR
• plone/plone.app.widgets#183: date & datetime configuration changes (if merged into master 5.1, needs branch)
  • [ ] Merge PR
• plone/Products.CMFPlone - compiled packages, resource registry integration
  • [ ] Implement and create PR
  • [ ] Merge PR
• plone.app.event
  • [ ] Fix JavaScript for setting/hiding date/time based on previous input resp. state of whole day and open end fields.
• [ ] localization
• [ ] maybe a time picker

Risks

• Some configuration options will change and the internals will work differently - the updated event on the original input will remain the same, though.

• There is no time picker (which might actually be an improvement). Browsers supporting native widgets for time input fields will provide one out of the box (mobile browsers + Google chrome). See also Can I Use 'input-datetime'

• The new datepicker is smaller than pickadate, which might be harder to use in mobile environments (although, OOTB we will allow the native date/time widgets of the mobile device be used instead).

Participants

• Johannes Raggam - implementation
• Jens Klein - help to get it out

[agitator]

@thet wouldn't be https://github.com/Eonasdan/bootstrap-datetimepicker the way to go?

[jensens]

I added plips/plip-2150-new-datetime-and-date-widgets.cfg to buildout.coredev.

To make it work build coredev with this cfg.

Then do:

./bin/plone-compile-resources -b plone
./bin/plone-compile-resources -GIb plone-logged-in
./bin/plone-compile-resources -GIb patterns

Start instance, then install a fresh Plone with addons and chooser Patternslib.

It is not finished.

Todo:

• Styles/CSS
• Javascript for Whole Day/Open End to disable picker.
• localization (atm it seems only amerikan date and time format with am/pm is shown even in german.
• patternslib integration in Products.CMFPlone

[tomgross]

What's the state of this?

[thet]

This needs some funding. For my part, the project where I use these branches is out of budget to finalize the PLIP.

[MrTango]

@thet How much work will this be? I think we really need some solid widget here, the current situation on DateWidgets is bad. For a current project i needed more a TextWidget with the Date field, but even this was not easy to do. I had to use a custom DataConverter and a custom TextWidget to archive this. Plus i had to import the virtualtime package to get rid of the <1900 problem, as i needed date before 1900.

[thet]

@MrTango you can use what's there (referenced in this PLIP) as I do. But this involves some branches of core packages, which is ugly to maintain. To get it into core, see the deliverables in the PLIP description. I think that could be doable within the scope of a sprint. Note, that the widget is only relevant for Safari and IE11 - all other browsers do already support a native widget. With these PLIP branches in place, I always get the native widgets in Firefox.

[hvelarde]

after reading @thet comments I think this PLIP doesn't worth the effort.

[thet]

@hvelarde I you mean that the relevance of IE11 and Safari: Without the changes in this PLIP you won't get the browser's native date/time widgets. This PLIP changes the form inputs to datetime type including necessary changes all over the place. It's only the mockup widget which is only relevant for IE11 and Safari - because on modern browsers Pikaday's progressive enhancement feature doesn't load the JS widget but allows the native to take over (if configured to do so). Or what did you mean? IMO, this PLIP is worth the effort and it's almost ready.

[hvelarde]

I think it doesn't worth the effort to support deprecated browsers used by almost nobody; we already have a widget, isn't it? let's keep thing clean and simple.

but, you guys know better than I do.

[thet]

There are the change we need to get the browser's native widget working, basically: https://github.com/plone/plone.app.z3cform/pull/90

[tisto]

@thet @jensens is that PLIP something that you still plan to work on? The last comment was from more than a year ago.

Maybe it would make sense to implement a new datetime/date widget in Volto first and then backport that to Plone Classic UI at a later point?

[jensens]

Maybe it would make sense to implement a new datetime/date widget in Volto first and then backport that to Plone Classic UI at a later point?

I would like to see that happen. I am sure in ReactJS-world there are many ready to use better datetime/date widgets around where we could pick from and integrate them.

[thet]

Done in https://github.com/plone/plone.app.z3cform/pull/141 as part of the ES6 effort. Closing this.