Local Timezone Display in Data Grids

Data grids display, by default, datetime values in the server timezone (UTC) rather than the local timezone. There’s a workaround that’s annoying and prevents you from using data bindings to set the dates in row templates.

So I wrote a component that will display datetimes in local timezones but keep data binding working:

https://anvil.works/build#clone:OITEW55DKQRVGZFI=VBFGNSDV2H5XDWYM6S67HJ5Z

You can drop this component onto a row template in a field that is supposed to represent a datetime. You can use data binding to set the component’s item attribute to the date to display.

Set the format attribute in the designer to suit the way you want the date displayed (using strftime syntax).

Set the none_text attribute to what you want to see if the date provided is None.

It’s a fairly simple custom component, but keeps me from having to do the local timezone conversion workaround over and over. I’m hoping that someone else finds it useful, too.

8 Likes

Hello, can be possible to use this component on datatable, with stored date and make on it conversion for local user ? Thank you

Hello, im trying several test with your compenent and i cant come to solution, if you can give me any help can be great, im tryng to convert datatable with date for then show in dategrid :
Aug 19 2022 07:01 PM (format of date)

Thank you!

This is how you use the component. It’s designed to be used inside the row template of a data grid.

If you’re not sure what those instructions mean, I highly recommend the data grid tutorials: Anvil | Data Grids: Displaying Data In Tables

Hello, thank you for replay, here i do several tests but i cant figure out i use the component in the row of time at the same format(strftime) and when i run the application as not showing the time columns

Access to app:
https://anvil.works/build#clone:A2O7MJ25PLTCHIJ2=BWXUENX4IWLQAUC6WULWP66Q
Before add component:


After add component:

Thank you!

You have a few issues.

  1. You are data binding to the format property, not the item property. The item property is the date, the format property says how the date should be displayed.

  2. Your data table uses a text field instead of a datetime field, so you are not actually giving a datetime to the code. Your data table should store the datetime as a datetime, not as text.

  3. You failed to hook up the refresh data bindings event in your copy of local tz label

If you fix those issues, the component will work.

For future reference, when you are trying to use someone’s custom component, you do not need to copy the code into your app (that introduced error #3). You can use their component as a dependency: Anvil Docs | Depending On Other Apps

2 Likes

Thank you so much! @jshaffstall