Date list labels are not visible above select field creating bad UX

Created on 1 July 2024, 12 days ago
Updated 11 July 2024, 2 days ago

Problem/Motivation

When creating a 'Date list' element the labels (Day, Month, Year) are not visible above the select fields but only as the first option. This makes using the Date List more difficult for users because when an option is chosen you cannot see what the label used to be. Especially relevant because of different use of date notation (m/d/y vs d/m/y). As visible on the attached screenshot it is impossible to differentiate what is supposed to be day, month, hour or minute.

Steps to reproduce

- Create a webform with the Webform module .
- Create Date List element.
- View form in front-end.

Proposed resolution

Make labels for day, month, year, etc visible by default above the select fields. This can be done by either removing or editing line 256 in core/lib/Drupal/Core/Datetime/Element/Datelist.php
'#title_display' => 'invisible',

🐛 Bug report
Status

RTBC

Version

10.3

Component
Form 

Last updated about 18 hours ago

Created by

🇳🇱Netherlands rroose

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rroose
  • Assigned to Sourav_Paul
  • Issue was unassigned.
  • Status changed to Needs review 8 days ago
  • Pipeline finished with Success
    8 days ago
    Total: 582s
    #216649
  • Pipeline finished with Success
    8 days ago
    #216651
  • Status changed to Needs work 3 days ago
  • 🇺🇸United States smustgrave

    Is this reproducible without the contrib module?

    MR should be against 11.x not 10.3.x

    Also if reproducible in core will probably need a test case

  • 🇳🇱Netherlands rroose

    How to reproduce with core:

    1. Make sure you are logged into Drupal as user with sufficient permissions
    2. Enable the 'Contact' module
    3. Navigate to /admin/structure/contact and 'Add contact form'
    4. Fill in a label and recipients (can be anything) and click 'Save'
    5. Click on the error next to edit below operations of the newly created form and select 'Manage Fields'
    6. Click 'Create new field'
    7. Select 'Date and time' and click 'Continue'
    8. Fill in the label, select 'Date' and click 'Continue'
    9. Leave settings as is and click 'Save settings'
    10. Go to 'Manage form display'
    11. Click on the select option 'Date and time' of the newly created date field, choose 'Select list' and click on 'Save'
    12. Click on view to see the date field in the Drupal front-end
  • Status changed to Active 2 days ago
  • 🇳🇱Netherlands rroose
  • First commit to issue fork.
  • Pipeline finished with Success
    2 days ago
    Total: 497s
    #221625
  • Status changed to Needs review 2 days ago
  • 🇮🇳India amanmansuri72

    As per the "Problem/Motivation," I have resolved the issues as suggested for the 10.3.x version Merge request !8739 created for the same.

    Kindly review

    Thanks

  • Status changed to RTBC 2 days ago
  • 🇮🇳India Chandansha

    I have tested MR 8739. Now label looking good.
    i moved it to RTBC.
    Thanks!!

Production build 0.69.0 2024