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 @@