Problem/Motivation

Date field elements have:

  • Complicated configuration
  • Inconsistent behaviour between similar elements
  • Poor layout
  • Restrictive default values
  • Unhelpful labels or descriptions
  • Useless error messages
  • too tight or too loose validation

Goal/s

To have a consistent user experience when working with the date and time related elements (Widgets and Formatters)/

Background

  • Each date and time related field belongs to a core module.
  • Date fields are added to bundles/nodes/entities to hold data
  • Widgets are used for inputting/updating this data. These are configured on the form display settings of the bundle
  • Formatters are used for showing the held data on a range of displays.

Proposed resolution

This is an epic and very long term plan. There are quite a few ways to categorise the tickets. Firstly by UX categories. Then by the sub-components of the date related core modules.

Remaining tasks

  • Define the best practices and the Drupal way of doing each of these UX goals, Add them to the usability guide
  • Assess each best pratice on each sub component doing a usability study
  • Create tickets for each of the changes needed on the relevant module and tag those tickets with "Usability", the component, the sub component and the UX category.
  • FIX THE BUGS!!

Drupal Form element UX best practices

UX categories

Streamlined Configuration

Problem/s Formatting dates using the PHP method is non-intuitive.

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Consistent Behaviour

Problem/s There are slight differences between the datetime and timestamp widgets, but from the user's perspective the there shouldn't be.
Solutions Which format should we go with?

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Clear Layout

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Default Values

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Helpful Labels and description

problems When on a browser that doesn't use the HTML5 inputs, there is no clear indication of what field is what, especially w/o the polyfill, b/c the labels are invisible

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Useful error messages

Error Messages

Problem/s "Error messages aren't great" - In some cases these are just plain wrong. E.g. the date might be dd/mm/yyyy and the error message tells you to put you yyyy-mm-dd.
Solutions

  • The user should see a message that tells them what went wrong and what they can do next to fix the problem
  • The messages should be consistent across the widgets.

Datetime module

Daterange module

Field/s
Widgets
Formatters

Timestamp module

Field/s
Widgets
Formatters

Validation

Datetime module

Daterange module

Field/s
Widgets
The date range widget should leverage client side validation to help prevent end is less than start
Formatters

Timestamp module

Field/s
Widgets
Formatters

CommentFileSizeAuthor
#9 firefox.png5.37 KBmahtabalam
#9 chrome.png5.04 KBmahtabalam

Comments

mpdonadio created an issue. See original summary.

mpdonadio’s picture

mpdonadio
he/him
Primary language English
Location Philadelphia/PA/USA (UTC-5)
commented

Going to go through and link the relevant issues here, so we can weed out the duplicates. Many are in the datetime.module component, but a bunch are in forms system, field system, or somewhere else.

mpdonadio’s picture

mpdonadio
he/him
Primary language English
Location Philadelphia/PA/USA (UTC-5)
commented
Related issues: +#2876047: Correctly mention field labels in form validation error messages, +#2836054: Allow configuring of datelist year range date_year_range via UI, +#2839076: Datetime error message can be unclear depending on the time of day, +#2791693: Remove sample date from date field error message and title attribute, +#2875131: Datetime element formats are confusing, +#2895055: Edit the date range error messages, +#2896683: Add a label and description text to Time range, +#2863444: Discourage/make impossible to select a "to" date that is before the "from" date, +#2884759: Date format confusing with HTML5 date fields, +#2646454: Change the date format for the form display

Here are a bunch in datetime.module. Didn't look through them yet to see if any are dups.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

kattekrab’s picture

kattekrab commented

Oh my goodness!

Yes let's!

Sorry for delayed response here, but I just stumbled on this after seeing progress on one of the linked issues.

This is one of the "death by 1000 paper cuts kind of issues, it would be great to tackle holistically, systemically, and get consistent behaviour everywhere!

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

mahtabalam’s picture

mahtabalam
He/Him/His
commented
StatusFileSize
new chrome.png5.04 KB
new firefox.png5.37 KB

The design of Date and time field is different in chrome and firefox.
Drupal Version
8.7.3

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

quietone commented
Issue summary: View changes

doing Bug Smash triage and I found myself here, after closing some datetime duplicates.

I think it would be helpful if someone familiar with these problems added a priority for fixing this remaining issues, which are now in the IS.

andypost’s picture

andypost
he/him
Primary language Russian
commented
Related issues: +#3081515: Add a new, accessible datepicker library to avoid using native browser datepickers for accessibility and consistency, +#2936268: Date picker only works with US date and time formats, +#2648950: [PP-2] Use form element of type date instead textfield when selecting a date in an exposed filter

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue tags: +DrupalSouth
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Assigned: Unassigned » jaime@gingerrobot.com
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Title: [META] Fix the UX of datetime/daterange/timestamp widgets and datetime/datelist elements » [META] [PARENT] Fix the UX of datetime/daterange/timestamp widgets and datetime/datelist formatterts
Issue summary: View changes
Issue tags: +widget, +formatter, +form elements
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Issue summary: View changes
jaime@gingerrobot.com’s picture

jaime@gingerrobot.com commented
Title: [META] [PARENT] Fix the UX of datetime/daterange/timestamp widgets and datetime/datelist formatterts » [META] [PARENT] The UX of datetime/daterange/timestamp fields, widgets & Formatters is consistent

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ressa’s picture

ressa
he/him
commented
Related issues: +#3467914: Define a standard for Date formats, +#3467829: Use ISO 8601 format in Authored on field date picker, +#3466529: Use easily recognizable date format

This is great, thanks! I recently proposed a date standard in #3467914: Define a standard for Date formats and #3467829: Use ISO 8601 format in Authored on field date picker after the human readable Drupal core date formats were updated in #3466529: Use easily recognizable date format. Perhaps defining a standard could help this issue move forward?

markdc’s picture

markdc
Location Selters
commented
Title: [META] [PARENT] The UX of datetime/daterange/timestamp fields, widgets & Formatters is consistent » [META] [PARENT] Inconsistent UX of datetime/daterange/timestamp fields, widgets, and formatters

Edited for clarity.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.