Hello everyone and thank you for reading me
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
I have the same question. Following
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.
Sorry but do you mean that by default time is displayed in the user timezone?
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).
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?
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.
Thank’s for the clarification!
Moment.js has been welcomed into my bookmark folder of JS libraries
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?
Is there any solution for this. I’m using webflow as a designer, this seems to be too advanced for me
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
Update: I have improved the code and added into a gist. Here is the link.
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 for the kind words mate. I was busy with my day job and could rarely look into forums. Apologies
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?
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.
Hi Zeeshan, were you able to solve this? If so, would be willing to share the solution?
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!
I have the same question. Following