javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/datetime/datetime.tsx
View File

@ -6,7 +6,7 @@ import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { pickerController } from '../../utils/overlays';
import { hostContext } from '../../utils/theme';
import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, getTimezoneOffset, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -81,6 +81,14 @@ export class Datetime implements ComponentInterface {
*/
@Prop() displayFormat = 'MMM D, YYYY';
/**
* The timezone to use for display purposes only. See
* [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
* for a list of supported timezones. If no value is provided, the
* component will default to displaying times in the user's local timezone.
*/
@Prop() displayTimezone?: string;
/**
* The format of the date and time picker columns the user selects.
* A datetime input can have one or many datetime parts, each getting their
@ -287,7 +295,7 @@ export class Datetime implements ComponentInterface {
}
private updateDatetimeValue(value: any) {
updateDate(this.datetimeValue, value);
updateDate(this.datetimeValue, value, this.displayTimezone);
}
private generatePickerOptions(): PickerOptions {
@ -326,7 +334,11 @@ export class Datetime implements ComponentInterface {
* there can be 1 hr difference when dealing w/ DST
*/
const date = new Date(convertDataToISO(this.datetimeValue));
this.datetimeValue.tzOffset = date.getTimezoneOffset() * -1;
// If a custom display timezone is provided, use that tzOffset value instead
this.datetimeValue.tzOffset = (this.displayTimezone !== undefined && this.displayTimezone.length > 0)
? ((getTimezoneOffset(date, this.displayTimezone)) / 1000 / 60) * -1
: date.getTimezoneOffset() * -1;
this.value = convertDataToISO(this.datetimeValue);
}