mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(datetime): add custom timezone display property (#19519)
resolves #19401
This commit is contained in:
committed by
Liam DeBeasi
parent
39d12629db
commit
7b032c5e9b
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user