diff --git a/core/src/components/datetime/datetime-util.spec.ts b/core/src/components/datetime/datetime-util.spec.ts
index effe879e99..db6dfd25ff 100644
--- a/core/src/components/datetime/datetime-util.spec.ts
+++ b/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"
});
});
diff --git a/core/src/components/datetime/datetime-util.ts b/core/src/components/datetime/datetime-util.ts
index 6d565b33f2..53e4d94482 100644
--- a/core/src/components/datetime/datetime-util.ts
+++ b/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 {
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 304524de9b..2423dd7e3e 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/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();
});
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index 3cf5be322a..732271affe 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -31,12 +31,12 @@
Default
-
+
Default with floating label
-
+
Placeholder with floating label
@@ -124,6 +124,15 @@
+
+ YYYY MMM DD hh:mm A
+
+
+
+
Leap years, summer months
@@ -164,6 +173,9 @@