How to Handle Time Zones in Retool Applications

1-- PostgreSQL: use TIMESTAMPTZ
2CREATE TABLE events (
3  id SERIAL PRIMARY KEY,
4  title TEXT,
5  event_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
6  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
7);
8
9-- Insert UTC timestamp from Retool (Date Picker with Manage Time Zone enabled):
10INSERT INTO events (title, event_at)
11VALUES ({{ titleInput.value }}, {{ datePicker1.value }}::TIMESTAMPTZ);
12-- datePicker1.value with Manage Time Zone ON = UTC ISO string
13
14-- Query with timezone conversion:
15SELECT
16  title,
17  event_at AT TIME ZONE 'UTC' AT TIME ZONE 'America/New_York' AS event_at_eastern
18FROM events;

1// With 'Manage time zone' ON:
2// User in New York selects: 2026-03-25 09:00 AM EST
3// datePicker1.value = '2026-03-25T14:00:00.000Z' (UTC)
4
5// User in London selects: 2026-03-25 09:00 AM GMT
6// datePicker1.value = '2026-03-25T09:00:00.000Z' (UTC)
7
8// Database INSERT — same UTC value regardless of user timezone:
9INSERT INTO events (event_at)
10VALUES ({{ datePicker1.value }}::TIMESTAMPTZ);
11
12// Loading a UTC value back into the Date Picker:
13// Default Value: {{ getEvent.data[0].event_at }}
14// Display: shows in user's LOCAL time (e.g., 9 AM for both users)

1// Display UTC timestamp in user's browser timezone:
2{{ new Intl.DateTimeFormat('en-US', {
3  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
4  year: 'numeric',
5  month: 'short',
6  day: 'numeric',
7  hour: '2-digit',
8  minute: '2-digit',
9  timeZoneName: 'short'
10}).format(new Date(table1.selectedRow.data.event_at)) }}
11// Output: 'Mar 25, 2026, 09:00 AM EST'
12
13// Short display (date only, local timezone):
14{{ new Date(row.created_at).toLocaleDateString() }}
15
16// With explicit timezone:
17{{ new Intl.DateTimeFormat('en-US', {
18  timeZone: 'America/New_York',
19  dateStyle: 'medium',
20  timeStyle: 'short'
21}).format(new Date(row.event_at)) }}
22// Output: 'Mar 25, 2026, 9:00 AM'

1// Text component showing current timezone:
2{{ `Times shown in: ${Intl.DateTimeFormat().resolvedOptions().timeZone}` }}
3// Output: 'Times shown in: America/New_York'
4
5// Shorter display with UTC offset:
6{{ (() => {
7  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
8  const offset = new Date().toLocaleTimeString('en-US', {
9    timeZoneName: 'short',
10    timeZone: tz
11  }).split(' ').pop();
12  return `${tz} (${offset})`;
13})() }}
14// Output: 'America/New_York (EST)'
15
16// Store user timezone in a Temporary State for use in queries:
17// In a 'Run on page load' JS Query:
18await userTimezone.setValue(Intl.DateTimeFormat().resolvedOptions().timeZone);

1// Preloaded JS URL to add:
2// https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js
3
4// After loading, available in transformers and JS Queries:
5
6// Convert UTC to a specific timezone:
7{{ moment.tz(row.event_at, 'America/Los_Angeles').format('MMM D, YYYY h:mm A z') }}
8// Output: 'Mar 25, 2026 6:00 AM PDT'
9
10// Convert to the timezone selected in a dropdown:
11{{ moment.tz(row.event_at, timezoneSelect.value).format('MMM D, YYYY h:mm A z') }}
12
13// Convert local time to UTC for storing:
14// JS Query:
15const localTime = datePicker1.value; // user's local selection
16const utcTime = moment.tz(localTime, selectedTimezone.value).utc().toISOString();
17await insertEvent.trigger({ additionalScope: { eventAt: utcTime } });

1// Temporary State: displayTimezone
2// Default value: {{ Intl.DateTimeFormat().resolvedOptions().timeZone }}
3
4// Timezone Select static options (common zones):
5// Label: UTC                Value: UTC
6// Label: Eastern US (ET)    Value: America/New_York
7// Label: Pacific US (PT)    Value: America/Los_Angeles
8// Label: London (GMT)       Value: Europe/London
9// Label: Paris (CET)        Value: Europe/Paris
10// Label: Tokyo (JST)        Value: Asia/Tokyo
11
12// Display expression in Table column or Text component:
13{{ new Intl.DateTimeFormat('en-US', {
14  timeZone: displayTimezone.value,
15  dateStyle: 'medium',
16  timeStyle: 'short',
17}).format(new Date(row.event_at)) }}
18
19// JS Query: updateDisplayTimezone
20await displayTimezone.setValue(timezoneSelect.value);