Skip to main content

Manage time zones

Learn how to manage time zones in Date Time and other components.

Components such as Date Time can manage the time zone differences between displayed values and input values. This is useful if you have users in multiple time zones; they can work with dates and times based on their local time zone, but any values remain in their original time zone (e.g., UTC).

To manage time zones on these components, toggle Manage time zone in the Inspect tab of the right panel.

When Manage time zone is on, you can display timestamps local to a given time zone and encode a timestamp with a time zone offset.

The demo app below shows the difference in how date and time values appear when using managed and unmanaged time zones. Each component has the same underlying value.

Change the display of a date and time​

To change the display of a time based on time zone, toggle on Manage time zone.

Manage time zone option on the Date Time component

Local time​

To display a time based on the end-user's local time zone, select Local time in the Display dropdown of the Inspector. This shows the timestamp adjusted for the user's local time, inferred from their browser or device.

Offset​

To display a time based on a given time zone offset from UTC, in the Display field select the offset. In some locations, the offset for an area changes during daylight saving time (e.g., Eastern Time is -4:00 during daylight saving time and -5:00 otherwise).

Specific time zone​

To display a time based on a given time zone:

  1. In the Display field, select the JavaScript fx mode.
  2. Enter {{ moment(self.value).tz('LOCAL_TIME_ZONE_NAME').format('Z') }}, where LOCAL_TIME_ZONE_NAME is the local time zone name, defined in the Moment library.

Time zones automatically adjust for daylight saving time.

Save values in a specified time zone​

When working with dates and times, you can specify how to encode values with time zones. It can be useful to consistently save values in UTC and use local time zones only for display. You can set the component's Value to be UTC, a specific offset, or Local time.

OptionDescription
UTCStore values with no offset.
Specific offset, e.g., -5:00Store values with the given offset, e.g., "1999-10-26T08:45:00.000-0500".
Local timeStore values with an offset inferred from the end user's local time, inferred from their browser or device.

Use dates and times in tables and other components​

You can also manage time zones for date and time values in the Table component: set the Column Type to Time or Datetime. You can also use the same Manage time zone options in other components that support date and time values.

Date Time column with mapped value moment formatting

If you use date and time values elsewhere, such as a Text component or in a notification, you can write JavaScript using the pre-loaded Moment library to format time zone differences. For example, you can convert and display a timestamp using the current user's local time:

{
  {
    moment(self.value).tz("local").format("YYYY-MM-DD hh:mma z (Z)");
  }
}

In this example, a value of 2022-09-01T15:00:00.000Z (15:00 UTC) would appear to a user in New York (Eastern Time) as 2022-09-01 11:00am (-5:00).

You can also use this formatting for the Mapped value on a Table column:

Text column with mapped value moment formatting