Steps to reproduce

  1. Add a date field to an entity and then go to to that form.
  2. Fill in an appropriate date.
  3. Fill in a time that has a single digit hour, like "8:15:00".
  4. Submit the form and receive a validation message along the lines of The Start date is invalid. Please enter a date in the format 12:00:00.

The basic problem is that there's a disconnect between the time that you enter in the form and the time that you submit the form. The error message generates a sample based on the current time. This means that if you submit the form between 00:00:00 - 09:59:59, you will get an error message that pretty clearly shows that the hour format is HH. However, if you submit the form between 10:00:00 - 23:59:59, then the hour would be two digits regardless of whether the hour format is HH or H, so it's not as clear that the hour you entered is in the wrong format.

Possible solutions

  1. Try to use the submitted time (formatted correctly) as the sample time. (i.e. strtotime())
  2. Use a static time for the sample that is between 00:00:00 - 09:59:59.
  3. Rather than a sample time, show the actual format string.
  4. Something else I didn't think of. :)
CommentFileSizeAuthor
#15 Placeholder.png93.49 KBKumar Kundan
#12 Original-Edge_issue.png27.86 KBno sssweat
#11 ie-11-issue.png1.89 KBno sssweat

Comments

kevin.dutra created an issue. See original summary.

kevin.dutra’s picture

kevin.dutra commented
Priority: Normal » Minor

Whoops, this is minor.

mpdonadio’s picture

mpdonadio
he/him
Primary language English
Location Philadelphia/PA/USA (UTC-5)
commented
Issue tags: +Needs UX review
Related issues: +#1838234: Add jQuery Timepicker for the Time element of the datetime field

Just a note that this will only happen on browsers that don't support HTML5 time entry (Firefox and IE11 the last time I checked).

I would got for a combo of 2 and 3, but am interested in a UX perspective here. I would do something like

The Start date is invalid. Please enter a date in the format "H:i:s", such as "09:45:30".

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

joyceg’s picture

joyceg commented

okay. So, this is a compatibility issue.

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

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should 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.

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

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should 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.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should 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.

xjm’s picture

xjm
she/her
Primary language English
commented
Issue tags: -needs UX review +Needs usability review
xjm’s picture

xjm
she/her
Primary language English
commented
Version: 8.6.x-dev » 8.9.x-dev
no sssweat’s picture

no sssweat commented
StatusFileSize
new ie-11-issue.png1.89 KB

Just a note that this will only happen on browsers that don't support HTML5 time entry (Firefox and IE11 the last time I checked).

I would got for a combo of 2 and 3, but am interested in a UX perspective here. I would do something like

The Start date is invalid. Please enter a date in the format "H:i:s", such as "09:45:30".

You forgot to take off your developer hat, most people will have no idea what "H:i:s" means.

As you already mentioned, Internet Explorer 11, it doesn't display any place holder at all

IE 11 issue

So I suggest the message should be:

The Start date is invalid. Please enter a date in the format "hh:mm:ss", such as "09:45:30".

no sssweat’s picture

no sssweat commented
StatusFileSize
new Original-Edge_issue.png27.86 KB

A big issue I discovered on the original Microsoft Edge browser (Not the new Edge chromium, although, I have not tested that one, but likely will be fine).

When selecting a date, it doesn't allow the user to type it in, you must select from a popup and this provides only single-digit for the hour

og Edge issue

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.

Kumar Kundan’s picture

Kumar Kundan commented
Assigned: Unassigned » Kumar Kundan
Kumar Kundan’s picture

Kumar Kundan commented
StatusFileSize
new Placeholder.png93.49 KB

Currently, placeholders are invalid for HTML5 date and DateTime. So placeholder will not be shown in time div & date div show default placeholder. This placeholder appears as an tooltips. Window appearance to select the date depends on browsers & this will be different on different browsers.

Kumar Kundan’s picture

Kumar Kundan commented
Assigned: Kumar Kundan » Unassigned

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.

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.

smustgrave’s picture

smustgrave commented

I believe this is no longer an issue as it works in firefox and IE is no longer supported.

smustgrave’s picture

smustgrave commented
Status: Active » Closed (outdated)

I was not able to replicate and the issue hasn't been updated in 2 years. If it's still an issue feel free to reopen.

smustgrave’s picture

smustgrave commented
Issue tags: +Bug Smash Initiative