Incorrect Timezone Conversion Using `moment().tz`

App Building
1

Hi Retool team,

I used moment() to convert a timestamp column to a target timezone, but the output is incorrect. Could you please let me know how to solve this? Thank you in advance!!!

Detailed Description
The timestamp column stores UTC data. I used moment(self).tz('America/Los_Angeles) in the column Mapper for timezone conversion.

Expected Behavior
The column should display timestamp values converted to America/Los_Angeles.
For example, "2021-06-21 17:23:37.000" should be converted to and displayed as
"2021-06-21 10:23:37.000".

Actual Behavior

  1. If the column type is set to be the default, the actual result is "2021-06-21T09:23:37.000Z". There is one hour difference.
  2. If the column type is set to be the Date time (original timezone), the actual result is "Jun 21, 2021, 5:23:37 PM". The value is not converted at all.

CleanShot 2021-06-23 at 22.46.36
CleanShot 2021-06-23 at 22.46.36707×278 33.6 KB

CleanShot 2021-06-23 at 22.46.50
CleanShot 2021-06-23 at 22.46.50705×263 30.8 KB

2

Hi @doris.l !

It looks like the value you are passing into moment is not being treated as a UTC timestamp. If you run console.log(moment('2021-06-21 17:23:37.000')) the _isUTC value is set to false which is then causing the timezone conversions to be incorrect. Using moment.utc('2021-06-21 17:23:37.000') will force this to be a UTC moment object and then you can parse it with the timezone:

1546×782 56 KB


5 Likes
3

Hi @ben, it works! Thank you for the help.

4

Hello @ben,

I'm having the same issue, except using the Datepicker column type. I followed the guidance here and it seems to work with Date time (original timezone) but not Datepicker. Is there a way to force Datepicker column type to not adjust for the local timezone?

Thank you!

5

Hi @seth10001 !

Unfortunately, it looks like the datepicker inside the table will always adjust to display in local time. Sorry about this!

1 Like
6

@ben, thank you for the reply! that is unfortunate, but maybe I could move the editing to it's own form. Although I do enjoy the bulk edit feature that the table supports.

7

var dateString = "05/08/23 05:19 PM"; - This date and time is in America/Chicago
var dateValue = moment(dateString).tz('Asia/Kolkata').format('DD-MMM-YYYY LT');
console.log(dateValue);- Output is in Asia/Kolkata 08-May-2023 5:19 PM.

Unable to convert to Device timezone.

8

Hey @GOPI_KRISHNA!

Based on these docs you can specify the timezone of the moment object when you parse your date string using moment.tz() as the constructor. Can you try the following?

const dateString = "05/08/23 05:19 PM"
const chicagoTime = moment.tz(dateString, "MM/DD/YY hh:mm A", "America/Chicago")
const kolkataTime = chicagoTime.clone().tz("Asia/Kolkata")
const dateValue = kolkataTime.format("DD-MMM-YYYY LT")
console.log(dateValue);
9