fix(datetime): do not reset to am when changing the hour and pm is set (#22016)

fixes #19175 fixes #19260 fixes #20026 references #16630

core/src/components/datetime/datetime-util.spec.ts

@@ -220,6 +220,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": 1000,
+        "ampm": "am"
       });
     });
 
@@ -234,6 +235,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": undefined,
+        "ampm": "pm"
       });
     });
 
@@ -248,6 +250,7 @@ describe('datetime-util', () => {
         "second": 20,
         "tzOffset": 0,
         "year": 1994,
+        "ampm": "pm"
       });
     });
 
@@ -262,6 +265,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": 2018,
+        "ampm": "am"
       });
     });
 

core/src/components/datetime/datetime-util.ts

@@ -238,6 +238,7 @@ export const parseDate = (val: string | undefined | null): DatetimeData | undefi
     second: parse[6],
     millisecond: parse[7],
     tzOffset,
+    ampm: parse[4] >= 12 ? 'pm' : 'am'
   };
 };
 
@@ -308,11 +309,33 @@ export const updateDate = (existingData: DatetimeData, newData: any): boolean =>
       }
 
     } else if ((newData.year || newData.hour || newData.month || newData.day || newData.minute || newData.second)) {
-      // newData is from of a datetime picker's selected values
-      // update the existing DatetimeData data with the new values
+      // newData is from the datetime picker's selected values
+      // update the existing datetimeValue with the new values
+      if (newData.ampm !== undefined && newData.hour !== undefined) {
+        // If the date we came from exists, we need to change the meridiem value when
+        // going to and from 12
+        if (existingData.ampm !== undefined && existingData.hour !== undefined) {
+          // If the existing meridiem is am, we want to switch to pm if it is either
+          // A) coming from 0 (12 am)
+          // B) going to 12 (12 pm)
+          if (existingData.ampm === 'am' && (existingData.hour === 0 || newData.hour.value === 12)) {
+            newData.ampm.value = 'pm';
+          }
 
-      // do some magic for 12-hour values
-      if (newData.ampm && newData.hour) {
+          // If the existing meridiem is pm, we want to switch to am if it is either
+          // A) coming from 12 (12 pm)
+          // B) going to 12 (12 am)
+          if (existingData.ampm === 'pm' && (existingData.hour === 12 || newData.hour.value === 12)) {
+            newData.ampm.value = 'am';
+          }
+        }
+
+        // change the value of the hour based on whether or not it is am or pm
+        // if the meridiem is pm and equal to 12, it remains 12
+        // otherwise we add 12 to the hour value
+        // if the meridiem is am and equal to 12, we change it to 0
+        // otherwise we use its current hour value
+        // for example: 8 pm becomes 20, 12 am becomes 0, 4 am becomes 4
         newData.hour.value = (newData.ampm.value === 'pm')
           ? (newData.hour.value === 12 ? 12 : newData.hour.value + 12)
           : (newData.hour.value === 12 ? 0 : newData.hour.value);
@@ -335,7 +358,8 @@ export const updateDate = (existingData: DatetimeData, newData: any): boolean =>
             ? (existingData.hour! < 12 ? existingData.hour! + 12 : existingData.hour!)
             : (existingData.hour! >= 12 ? existingData.hour! - 12 : existingData.hour))
       };
-      (existingData as any)['hour'] = newData['hour'].value;
+      existingData['hour'] = newData['hour'].value;
+      existingData['ampm'] = newData['ampm'].value;
       return true;
     }
 
@@ -537,6 +561,7 @@ export interface DatetimeData {
   second?: number;
   millisecond?: number;
   tzOffset?: number;
+  ampm?: string;
 }
 
 export interface LocaleData {

core/src/components/datetime/datetime.tsx

@@ -270,6 +270,12 @@ export class Datetime implements ComponentInterface {
         value: colOptions[colSelectedIndex].value
       };
 
+      if (data.name !== 'ampm' && this.datetimeValue.ampm !== undefined) {
+        changeData['ampm'] = {
+          value: this.datetimeValue.ampm
+        };
+      }
+
       this.updateDatetimeValue(changeData);
       picker.columns = this.generateColumns();
     });

core/src/components/datetime/test/basic/index.html

@@ -31,12 +31,12 @@
           <ion-label>Default</ion-label>
           <ion-datetime></ion-datetime>
         </ion-item>
-        
+
         <ion-item>
           <ion-label position="floating">Default with floating label</ion-label>
           <ion-datetime></ion-datetime>
         </ion-item>
-        
+
         <ion-item>
           <ion-label position="floating">Placeholder with floating label</ion-label>
           <ion-datetime placeholder="Select a date"></ion-datetime>
@@ -124,6 +124,15 @@
           <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
         </ion-item>
 
+        <ion-item>
+          <ion-label>YYYY MMM DD hh:mm A</ion-label>
+          <ion-datetime
+            id="todaysDate"
+            display-format="YYYY MMM DD hh:mm A"
+            minute-values="00,05,10,15,20,25,30,35,40,45,50,55">
+          </ion-datetime>
+        </ion-item>
+
         <ion-item>
           <ion-label>Leap years, summer months</ion-label>
           <ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
@@ -164,6 +173,9 @@
     </style>
 
     <script>
+      var todaysDateDatetime = document.querySelector('#todaysDate');
+      todaysDateDatetime.value = '2020-09-02T17:15:03.488Z';
+
       var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
       var customYearValues = document.getElementById('customYearValues');
       customYearValues.yearValues = yearValuesArray;