fix(datetime): datetime locale with h23 will respect max time range (#…

…24610) Resolves #24588
ionic-team · Jan 20, 2022 · 5925e76 · 5925e76
1 parent f295134
commit 5925e76
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 78 deletions.
diff --git a/core/src/components/datetime/test/data.spec.ts b/core/src/components/datetime/test/data.spec.ts
@@ -257,5 +257,35 @@ describe('generateTime()', () => {
         expect(minutes.length).toEqual(60);
       });
     });
+
+    it('should respect the min & max bounds', () => {
+      const refValue = {
+        day: undefined,
+        month: undefined,
+        year: undefined,
+        hour: 20,
+        minute: 30
+      }
+
+      const minParts = {
+        day: undefined,
+        month: undefined,
+        year: undefined,
+        hour: 19,
+        minute: 30
+      }
+
+      const maxParts = {
+        day: undefined,
+        month: undefined,
+        year: undefined,
+        hour: 20,
+        minute: 40
+      };
+
+      const { hours } = generateTime(refValue, 'h23', minParts, maxParts);
+
+      expect(hours).toStrictEqual([19, 20]);
+    });
   })
 })
diff --git a/core/src/components/datetime/test/minmax/index.html b/core/src/components/datetime/test/minmax/index.html
@@ -1,89 +1,77 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8">
-    <title>Datetime - Min/Max</title>
-    <meta name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
-        grid-gap: 20px;
-      }
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
 
-        color: #6f7378;
+<head>
+  <meta charset="UTF-8">
+  <title>Datetime - Min/Max</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  <style>
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(250px, 1fr));
+      grid-gap: 20px;
+    }
 
-        margin-top: 10px;
-        margin-left: 5px;
-      }
+    h2 {
+      font-size: 12px;
+      font-weight: normal;
 
-      ion-datetime {
-        box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
-        border-radius: 8px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Datetime - Min/Max</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <div class="grid">
-          <div class="grid-item">
-            <h2>Value inside Bounds</h2>
-            <ion-datetime
-              id="inside"
-              min="2021-09"
-              max="2021-10"
-            ></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Value Outside Bounds</h2>
-            <ion-datetime
-              id="outside"
-              min="2021-06-05"
-              max="2021-06-19"
-              value="2021-06-20"
-            ></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>AM/PM Min/Max</h2>
-            <ion-datetime
-              presentation="time"
-              min="09:30"
-              max="14:50"
-              value="10:30"
-            ></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>h23 Min</h2>
-            <ion-datetime
-              presentation="time"
-              hour-cycle="h23"
-              min="19:30"
-              value="20:30"
-            ></ion-datetime>
-          </div>
+      color: #6f7378;
+
+      margin-top: 10px;
+      margin-left: 5px;
+    }
+
+    ion-datetime {
+      box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
+      border-radius: 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-title>Datetime - Min/Max</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <div class="grid">
+        <div class="grid-item">
+          <h2>Value inside Bounds</h2>
+          <ion-datetime id="inside" min="2021-09" max="2021-10"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Value Outside Bounds</h2>
+          <ion-datetime id="outside" min="2021-06-05" max="2021-06-19" value="2021-06-20"></ion-datetime>
         </div>
-      </ion-content>
+        <div class="grid-item">
+          <h2>AM/PM Min/Max</h2>
+          <ion-datetime presentation="time" min="09:30" max="14:50" value="10:30"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>h23 Min</h2>
+          <ion-datetime presentation="time" hour-cycle="h23" min="19:30" value="20:30"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>locale: en-GB</h2>
+          <ion-datetime locale="en-GB" presentation="time" min="19:30" value="20:30" max="20:40"></ion-datetime>
+        </div>
+      </div>
+    </ion-content>
 
-      <script>
+    <script>
       const datetime = document.querySelector('ion-datetime');
       datetime.addEventListener('ionChange', (ev) => {
         console.log('Change', ev.detail.value);
       })
-      </script>
-    </ion-app>
-  </body>
+    </script>
+  </ion-app>
+</body>
+
 </html>
diff --git a/core/src/components/datetime/utils/data.ts b/core/src/components/datetime/utils/data.ts
@@ -219,7 +219,7 @@ export const generateTime = (
       if (maxParts.hour !== undefined) {
         processedHours = processedHours.filter(hour => {
           const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour;
-          return convertedHour <= maxParts.hour!;
+          return (use24Hour ? hour : convertedHour) <= maxParts.hour!;
         });
         isPMAllowed = maxParts.hour >= 13;
       }