feat(datetime): add custom timezone display property (#19519)

resolves #19401
This commit is contained in:
Asif Rahman
2020-01-09 15:29:40 -05:00
committed by Liam DeBeasi
parent 39d12629db
commit 7b032c5e9b
9 changed files with 103 additions and 23 deletions

View File

@@ -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>
@@ -142,6 +142,23 @@
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>Display UTC 00:00 in Local Timezone (default behavior)</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Display UTC 00:00 in UTC (display-timezone = 'utc')</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="utc"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Display UTC 00:00 in US Pacific Time (display-timezone = 'America/Los_Angeles')</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="America/Los_Angeles"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>HH:mm:ss</ion-label>

View File

@@ -1,4 +1,4 @@
import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime, renderDatetime } from '../datetime-util';
import { DatetimeData, daysInMonth, getDateValue, getDateTime, renderDatetime } from '../datetime-util';
describe('Datetime', () => {
describe('getDateValue()', () => {
@@ -32,7 +32,7 @@ describe('Datetime', () => {
});
});
describe('getLocalDateTime()', () => {
describe('getDateTime()', () => {
it('should format a datetime string according to the local timezone', () => {
const dateStringTests = [
@@ -44,7 +44,7 @@ describe('Datetime', () => {
];
dateStringTests.forEach(test => {
const convertToLocal = getLocalDateTime(test.input);
const convertToLocal = getDateTime(test.input);
const timeZoneOffset = convertToLocal.getTimezoneOffset() / 60;
const expectedDateString = test.expectedOutput.replace('%HOUR%', padNumber(test.expectedHourUTC - timeZoneOffset));
@@ -65,19 +65,32 @@ describe('Datetime', () => {
];
dateStringTests.forEach(test => {
const convertToLocal = getLocalDateTime(test.input);
const convertToLocal = getDateTime(test.input);
expect(convertToLocal.toISOString()).toContain(test.expectedOutput);
});
});
it('should format a datetime string using provided timezone', () => {
const dateStringTests = [
{ displayTimezone: 'utc', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T12:00:00.000Z` },
{ displayTimezone: 'America/New_York', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T07:00:00.000Z` },
{ displayTimezone: 'Asia/Tokyo', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T21:00:00.000Z` },
];
dateStringTests.forEach(test => {
const convertToLocal = getDateTime(test.input, test.displayTimezone);
expect(convertToLocal.toISOString()).toEqual(test.expectedOutput);
});
});
it('should default to today for null and undefined cases', () => {
const today = new Date();
const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } )
const convertToLocalUndefined = getLocalDateTime(undefined);
const convertToLocalUndefined = getDateTime(undefined);
expect(convertToLocalUndefined.toISOString()).toContain(todayString);
const convertToLocalNull = getLocalDateTime(null);
const convertToLocalNull = getDateTime(null);
expect(convertToLocalNull.toISOString()).toContain(todayString);
});
});