Manage date and time values in web apps

Learn how to display and manage date values in web apps.

Components that display date time values support time zone offsets. When configured, the component displays a date time value (displayValue) to the user based on the selected offset without altering value itself. Similarly, when a user selects a different date time value, this changes the displayValue. Retool uses the same offset to calculate the actual value to use.

To manage time zones on these components, toggle Manage time zone in the Inspect tab of the right panel. 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.

Demo

To change the display of a date and time based on time zone, toggle on Manage time zone. You can manage the time zone in the following ways:

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.

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