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.
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
- Offset
- Specific time zone
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.
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).
To display a time based on a given time zone:
- In the Display field, select the JavaScript
fxmode. - Enter
{{ moment(self.value).tz('LOCAL_TIME_ZONE_NAME').format('Z') }}, whereLOCAL_TIME_ZONE_NAMEis 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. |
Use dates and times in tables and other components
You can 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.
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:
