Making the timezone of the picker more clear to users (#829)

src/components/shared/pickers/DateTimePickerCTA.tsx

@@ -2,6 +2,9 @@ import { StaticDateTimePicker } from '@mui/x-date-pickers';
 import { formatRFC3339 } from 'date-fns';
 import { Calendar } from 'iconoir-react';
 import { useMemo } from 'react';
+import { BaseComponentProps } from 'types';
+import { Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
 import { INVALID_DATE, TIMEZONE_OFFSET_REPLACEMENT } from './shared';
 import { PickerProps } from './types';
 import DateOrTimePickerWrapper from './DateOrTimePickerWrapper';
@@ -23,6 +26,24 @@ const formatDate = (formatValue: Date) => {
     }
 };
 
+function PaperContent({ children }: BaseComponentProps) {
+    return (
+        <>
+            {children}
+            <Typography
+                sx={{
+                    textAlign: 'right',
+                    marginRight: 2,
+                    marginBottom: 1,
+                }}
+                variant="caption"
+            >
+                <FormattedMessage id="dateTimePicker.picker.footer" />
+            </Typography>
+        </>
+    );
+}
+
 // TODO (date time picker) weird date formatting issue
 // If the user types in a short value (that can be parsed as a date. ex: "1", "12", etc.) If they open the date picker
 //  and then select the same date that was parsed no change event is fired. This is a weird edge case so not
@@ -62,6 +83,9 @@ function DateTimePickerCTA(props: PickerProps) {
                 inputFormat="YYYY-mm-ddTHH:mm:ssZ"
                 openTo="day"
                 value={cleanedValue}
+                components={{
+                    PaperContent,
+                }}
                 onAccept={state.close}
                 onChange={(
                     onChangeValue: any,

src/lang/en-US.ts

@@ -1144,6 +1144,7 @@ const NewTransform: ResolvedIntlConfig['messages'] = {
 const CustomRenderers: ResolvedIntlConfig['messages'] = {
     'oauth.error.credentialsMissing': `need to complete OAuth`,
     'dateTimePicker.button.ariaLabel': `Open date time picker for {label}`,
+    'dateTimePicker.picker.footer': `Timezone: UTC`,
     'datePicker.button.ariaLabel': `Open date picker for {label}`,
     'timePicker.button.ariaLabel': `Open time picker for {label}`,
 };