Date picker only works with US date and time formats

Interesting. So why is this an accessibility issue? What part of WCAG 2.0 or 2.1 does it interfere with.

Obviously it should be dealt with as part of a global CMS. I'm tagging for localization as that might attract more of the right folks.

In Drupal 8, the date and time elements are HTML5 inputs, which will use your browser locale for display and the ISO formats internally regardless of what the site language is set for. Don't think we have any control of this.

I think everything in this issue is already covered in other issues (I know we have others about the format and descriptions). I will add them in when I go through the list.

OK but I place it here again.

My question is what happens, that in the beginning it works and then suddenly stopped displaying correctly ??

since a while the date field is not displayed correctly any more. // see pictures

on local it's correct there is an calendar pop_up when i enter the field in the node_edit mode
picture : Date with POPupcalender

the date field look like that
picture : Datefields with Date and Time

the date field displayed not in the correct form under safari and firefox
picture : Date with no POPupcalender and wrong datestructure

in chrome it displays correctly with POPupcalender
picture : Date with in POPupcalender in chrome and correct date display

I run Drupal 8.4.4 in German. English and French
picture languages

who give me a hint how to fix that. where could i look for.
Thanks for the answer.

I think you're looking for something like this https://support.mozilla.org/en-US/questions/987697

I suspect this may be a localization issue related to #1835016: Polyfill date input type, but I need to dig some more.

This issue is also manifesting in the date picker in views. Assume related to core issue and fall back date format not being changed so adding to this issue.

I really feel like this was working previously and stopped after I updated to 8.4.3 - the labels and description text I added and tested, and I'm pretty sure it was fine. I think updated from 8.1 or 8.2.

#8, what browser, and can you tell if that is a browser native picker or the polyfill one? Looking more like this is a problem with the polyfill w/ localization.

#9 I don't think the problem described here is due to the browser localization. I'm having the same issue with a date field. On Firefox and Chrome it displays as expected, on Safari desktop the date format is presented in the US english version. The preferred language settings are already set to German on the OS side in my case. I have no idea where to search for a solution. Any hint would be appreciated.

#10, thanks for the screenshots, they are a big help.

We may be seeing two intertwined and related issues here.

The screenshot in the issue summary shows what appears to be the Timestamp input widget on a HTML5 browser, and showing the US date and time formats.

Your screenshots are showing the Daterange widgets (which derive from the Datetime ones). The Firefox and Chrome shots show the HTML5 input, and your proper localization. The Safari one is using the jQuery polyfill for the date picker (desktop Safari does not have a native datepicker), and showing the date in ISO format (not what a US person would use), as that is the format for that widget.

I'll add the related issues when I can do through the queue to find them.

Thanks for the clarification, mpdonadio. I additionally tested it with a normal datetime field. I got the same behavior on the Safari browser. Maybe this is the related issue you mentioned? #2646454 Change the date format for the form display

#10 have the same issue for IExplorer.
Edit- You shall check this response. I think it does the trick https://www.drupal.org/project/drupal/issues/2646454#comment-12082042
The only thing is that the form validation wont accept this format for InternetExplorer.
It does validate for other browsers tho...
Weird, isnt it?

I noticed that the date picker works fine on Firefox Quantum 61.0.2 (64-bit) on macOS but same version doesn't work on Win10. I have tried to set everything to Finnish in Drupal, OS and browser, but the date format is stuck on US format.

Then I installed the Firefox in Finnish to Win10 machine and the date picker switched to Finnish too. Seems that the native picker is using the browser UI language on Windows https://support.mozilla.org/en-US/questions/1018686

One tip when working on this and you are changing the language settings in FireFox and Google Chrome to set the HTML5 date format that the date will be displayed with, the changes to the HTML5 date format do not apply until you restart the browser. This is more obvious in FireFox as it adds a button that says to apply and restart.

I have been trying to write a FunctionalJavascript tests which needs to fill in date field which has the browser HTML5 pop-up. The problem is that locally the tests need d/m/Y but on Drupal.org they need m/d/Y due to the different locale. Here's a hack that may help others to get round this in the test code:

    // Set the date using a day and month which could be correctly interpreted
    // either way. Set the year to be next year to ensure a future date.
    // Use a time format which includes 'pm' as this may be necessary, and will
    // be ignored if the time widget wants hh:mm:ss in 24 hours format.
    $page->fillField('edit-publish-on-0-value-date', '05/02/' . (date('Y') + 1));
    $page->fillField('edit-publish-on-0-value-time', '06:00:00pm');
    $page->pressButton('Save');
    $node = $this->drupalGetNodeByTitle($title);
    // If the saved month is 2 then the format is d/m/Y, otherwise it is m/d/Y.
    $this->datepickerFormat = (date('n', $node->publish_on->value) == 2 ? 'd/m/Y' : 'm/d/Y');

Sorry for posting a bit off-topic, but anyone likely to encounter the problem may well find this issue, just as I did.

This can be a really embarrassing issue as people just ask "but can't you fix it"?
I have installed British English as the default and it behaves better but this is not a solution.
It is very common in our part of the world for people to have their systems and their browsers interface language set in US English.

Does #2791693: Remove sample date from date field error message and title attribute fix the problem here, or does it just fix the messaging part?

@colan these patch for #2791693 only fix the message part, no the problem here.

This is needed to fix for the core.

However for now if someone is needed, can implement a hook update to get into the query the date in the format that is needed.

function module_name_views_query_alter(ViewExecutable $view, QueryPluginBase $query) {
  if ($view->id() === 'some_name' && $view->current_display == 'some_page') {
    $input = $view->getExposedInput();
    foreach ($query->where as $i => $where) {
      foreach ($where as $j => $where_group) {
        if (is_array($where_group) && $j == 'conditions') {
          foreach ($where_group as $k => $condition) {
            if (strpos($condition['field'], 'node_field_data.published_at') !== FALSE) {
              $parts = explode(' ', $condition['field']);
              $separator = $parts[1];
              $date = NULL;
              switch ($separator) {
                case '>=':
                  $date = DateTime::createFromFormat(
                    'd/m/Y',
                    $input["published_at_start"],
                  );

                  break;

                case '<=':
                  $date = DateTime::createFromFormat(
                    'd/m/Y',
                    $input["published_at_end"],
                  );
                  break;
              }

              if ($date) {
                $condition['field'] = implode(' ', [
                  reset($parts),
                  $separator,
                  $date->getTimestamp(),
                ]);
                $query->where[$i]['conditions'][$k] = $condition;
              }
            }
          }
        }
      }
    }
  }
}

Thank you @mpdonadio, #3 made all clear for me. Don't know why I hat US-english instead of german in my browser settings. Well, I don't care or play around with those settings.