MC-21331 Intl.DateTimeFormat returns different format

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Lint pyrene
       run: (cd pyrene && npm install && npm run lint)
   tuktuktwo:
@@ -21,7 +21,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Lint tuktuktwo
       run: (cd tuktuktwo && npm install && npm run lint)
   pyrene-graphs:
@@ -31,7 +31,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Lint pyrene-graphs
       run: (cd pyrene-graphs && npm install && npm run lint)
   kitchensink:
@@ -41,6 +41,6 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Lint kitchensink
       run: (cd kitchensink && npm install && npm run lint)

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Test pyrene
       run: (cd pyrene && npm install && npm test)
     - name: Build pyrene
@@ -26,7 +26,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Test tuktuktwo
       run: (cd tuktuktwo && npm install && npm test)
     - name: Build tuktuktwo
@@ -38,7 +38,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: '14'
+        node-version: '12'
     - name: Test pyrene-graphs
       run: (cd pyrene-graphs && npm install && npm test)
     - name: Build pyrene-graphs

pyrene/package.json

@@ -60,7 +60,6 @@
     "babel-plugin-typescript-to-proptypes": "^1.4.1",
     "copy-webpack-plugin": "^6.2.0",
     "css-loader": "^3.6.0",
-    "date-fns-tz": "^1.1.3",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^7.10.0",
@@ -99,6 +98,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "date-fns": "^2.16.1",
+    "date-fns-tz": "^1.1.4",
     "prop-types": "^15.6.1",
     "react-select": "^3.1.1",
     "react-table": "^6.8.6",

pyrene/src/components/TimeRangeSelector/TimeRangeNavigationBar/TimeRangeNavigationBar.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { differenceInMinutes } from 'date-fns';
+import { differenceInMinutes, getTime, format } from 'date-fns';
+import { utcToZonedTime } from 'date-fns-tz';
+
 
 import ArrowSelector from './ArrowSelector/ArrowSelector';
 
@@ -25,14 +27,12 @@ const TimeRangeNavigationBar = (props) => {
   );
 };
 
-/* eslint-disable-next-line react/display-name */
 TimeRangeNavigationBar.renderCurrentTimeRange = (from, to, timezone) => {
+  const localFrom = getTime(utcToZonedTime(new Date(from), timezone));
+  const localTo = getTime(utcToZonedTime(new Date(to), timezone));
+  const pattern = 'dd.MM.yyyy, HH:mm';
 
-  const locale = new Intl.DateTimeFormat('de', {
-    timeZone: timezone, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
-  });
-
-  return `${locale.format(from)} - ${locale.format(to)}`;
+  return `${format(localFrom, pattern)} - ${format(localTo, pattern)}`;
 };
 
 TimeRangeNavigationBar.defaultProps = {