How to display time in visitor time zone?

Design help CMS
1

Hello everyone and thank you for reading me :smiley:

I use CMS to publish my event calendar. I have fields for event start date/time and end date/time. How can I display these in my visitors local time?

I have updated my time zone in the General Settings.

Here is my public share link.

Thank you for your help :hugs:

2 Likes
2

I have the same question. Following

2 Likes
3

By default time objects are set to the OS settings. To show dates/times from a UTC or another timezone to a users timezone you will probably want to leverage Day.js and Day.js Timezone javascript plugin.

I coded a dynamic display with incrementing countdown timers for a similar requirement of another Webflow user using these so I know it can be done.

1 Like
4

Sorry but do you mean that by default time is displayed in the user timezone?

5

I was speaking of a JavaScript date object which by default is in UTC. The basic methods to fetch the date and time or its components all work in the local (i.e. host system) time zone and offset.

If you want to take a date that is UTC and then display it in the users local time you need to know what that timezone is and what its current offset from UTC is. This is complicated due to the number of timezones and possible observation of daylight savings time. Moment lets you work with date/time in a more elegant way and provides an optional Moment Time Zone plugin that makes it easy to work timezones and provides databases to work with timezones now and in the future (depending on how far out you are needing to go).

1 Like
6

If the basic methods of the date object work on host system level, can’t he just compare the UTC time from the cms to the date object? Due to always knowing the cms delivers UTC?
Just wondering

7

If you store the date/time value as UTC then you can use the getTimeOffset() method to determine the difference and use that in a calculation for display. However, if you need to know what the current status of Daylight Savings Time is for the user to display it, you need data. Moment.js also makes it trivial to present date/time values in a multitude of ways without writing lots of code. The docs are quite comprehensive.

Day.js is a lighter weight alternative.

1 Like
8

Thank’s for the clarification!
Moment.js has been welcomed into my bookmark folder of JS libraries :grin:

9

Thank you so much Jeff! I am a total
noob though. Do you know where I could find a tutorial to use moment.js to display time in the local time for my visitors on my CMS library in Webflow?

1 Like
10

Is there any solution for this. I’m using webflow as a designer, this seems to be too advanced for me

11

No, don’t use any libraries. You can easily increase performance instead by writing it in plain JS.

I wrote about how i implemented this here.

Let me know if that helps

12

Update: I have improved the code and added into a gist. Here is the link.

2 Likes
13

Hi @zeeshan – First off, thank you so much for building and sharing this code - you are awesome.

I don’t have a coding background, so I was wondering if you could help me understand:

  • Would this code adjust for daylight savings in all time zones, or just PST/PDT? For example EST/EDT.
  • This code worked beautifully on a collection page, but I can’t seem to get it to work in a collection list. When I embed this in a collection list of events (I tried it in the Body and in the Collection Item), the time zone conversion works… but it pulls the date+time from the last item in the collection for all the items in the list. Do you happen to know what I might be doing wrong that creates this result?

Thanks again!

16

Thanks for the kind words mate. I was busy with my day job and could rarely look into forums. Apologies :pray:

I hope you got the problem solved but if that’s not the case…

  • Daylight savings is only for the US. It can be modified to detect Europe and include it’s EST/EDT version.
  • I can take a look if it hasn’t been solved yet. Can you connect me through my email?
17

Has anyone figured out how to apply this to a collection list? Similar to the OP, I have a page with a list of events in which I’d like to display the date and time in the user’s local time.

18

Hi Zeeshan, were you able to solve this? If so, would be willing to share the solution?

19

Here is a codepen I built that shows how to create a countdown timer for an event (list of events from a collection list) in a users timezone that handles Daylight Savings. If you want help implementing it I would require payment for my time. Have fun!

1 Like
22

I have the same, question. .Following.

23

Hi Zeeshan, I’m also not able to get it working on my site on either the collection page or in a collection list. Has anyone else figured it out yet?

24

I was also looking for same query.