diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69315a9431..1a4bc7170df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)
- Added `sortBy` and `sortShift` props to `euiPaletteColorBlind()` for sorting along the color wheel ([#3387](https://github.com/elastic/eui/pull/3387))
+- Added `utcOffset` prop to `EuiSuperDatePicker` ([#3436](https://github.com/elastic/eui/pull/3436))
- Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
- Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
index 3401e4e286a..57363b233aa 100644
--- a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
@@ -36,6 +36,7 @@ export interface EuiAbsoluteTabProps {
onChange: EuiDatePopoverContentProps['onChange'];
roundUp: boolean;
position: 'start' | 'end';
+ utcOffset?: number;
}
interface EuiAbsoluteTabState {
@@ -106,37 +107,38 @@ export class EuiAbsoluteTab extends Component<
};
render() {
+ const { dateFormat, timeFormat, locale, utcOffset } = this.props;
+ const {
+ valueAsMoment,
+ isTextInvalid,
+ textInputValue,
+ sentenceCasedPosition,
+ } = this.state;
+
return (
+ isInvalid={isTextInvalid}
+ error={isTextInvalid ? `Expected format ${dateFormat}` : undefined}>
- {this.state.sentenceCasedPosition} date
-
- }
+ prepend={{sentenceCasedPosition} date}
/>
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
index e589753c278..12061f79046 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -49,6 +49,7 @@ export interface EuiDatePopoverButtonProps {
roundUp?: boolean;
timeFormat: string;
value: string;
+ utcOffset?: number;
}
export const EuiDatePopoverButton: FunctionComponent<
@@ -65,6 +66,7 @@ export const EuiDatePopoverButton: FunctionComponent<
onChange,
locale,
dateFormat,
+ utcOffset,
timeFormat,
isOpen,
onPopoverToggle,
@@ -120,6 +122,7 @@ export const EuiDatePopoverButton: FunctionComponent<
timeFormat={timeFormat}
locale={locale}
position={position}
+ utcOffset={utcOffset}
/>
);
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
index 31e8f86d5f5..008d3639765 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
@@ -45,6 +45,7 @@ export interface EuiDatePopoverContentProps {
timeFormat: string;
locale?: LocaleSpecifier;
position: 'start' | 'end';
+ utcOffset?: number;
}
export const EuiDatePopoverContent: FunctionComponent<
@@ -57,6 +58,7 @@ export const EuiDatePopoverContent: FunctionComponent<
timeFormat,
locale,
position,
+ utcOffset,
}) => {
const onTabClick: EuiTabbedContentProps['onTabClick'] = selectedTab => {
switch (selectedTab.id) {
@@ -84,6 +86,7 @@ export const EuiDatePopoverContent: FunctionComponent<
onChange={onChange}
roundUp={roundUp}
position={position}
+ utcOffset={utcOffset}
/>
),
'data-test-subj': 'superDatePickerAbsoluteTab',
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx
index 89553378878..91b8e16ab06 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -119,6 +119,7 @@ export type EuiSuperDatePickerProps = CommonProps & {
* Specifies the formatted used when displaying times
*/
timeFormat: string;
+ utcOffset?: number;
};
interface EuiSuperDatePickerState {
@@ -359,6 +360,7 @@ export class EuiSuperDatePicker extends Component<
locale,
refreshInterval,
timeFormat,
+ utcOffset,
} = this.props;
if (isAutoRefreshOnly) {
@@ -425,6 +427,7 @@ export class EuiSuperDatePicker extends Component<
onChange={this.setStart}
value={start}
dateFormat={dateFormat}
+ utcOffset={utcOffset}
timeFormat={timeFormat}
locale={locale || contextLocale}
isOpen={this.state.isStartDatePopoverOpen}
@@ -441,6 +444,7 @@ export class EuiSuperDatePicker extends Component<
onChange={this.setEnd}
value={end}
dateFormat={dateFormat}
+ utcOffset={utcOffset}
timeFormat={timeFormat}
locale={locale || contextLocale}
roundUp