How to display time in visitor time zone?

Design help CMS
25

I found out an easy way by worldtimebuddy. It has two options:

  1. It gives the current time at the timezone of the user’s system (Better World Clock Widget - World Time Buddy)

  2. It gives event’s times converted to user’s timezone (Meeting Widgets - World Time Buddy)

You set it up there and then copy the html code into your webflow project. There is no much of a customization but it is a very easy and quick solution.

26

If anyone is still after a solution, I got it working with luxon.js

Here’s a short tutorial - https://webflowtimezoneconverter.carrd.co/

Easy to modify the code and format the date in whichever way you want it.

27

Here is the scrip that is mising in the step 3 in this website: Webflow time zone converter

<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>

<script>
const defaultTimezone = 'America/La_Paz'; // here choose your webflow site time zone.

const local = luxon.DateTime.local(); 

const localZoneName = local.zoneName; 

$(function() {
    $('.timezone-convert').each(function(index) { 
        const date = $(this).text();
        const defaultDateTime = date.replace(' ', 'T') + ' ' + defaultTimezone; 
        const defaultDateTimeObject = luxon.DateTime.fromFormat(defaultDateTime, "yyyy-MM-dd'T'HH:mm z", { setZone: true });

        const localDateTimeObject = defaultDateTimeObject.setZone(localZoneName);
        const localString = localDateTimeObject.toLocaleString(luxon.DateTime.DATETIME_FULL);

        if (!localDateTimeObject.invalid) {
            $(this).text(date + " (" + localString + ")");
        }
    });
});
</script>

I hope it works for everyone. Make sure your datetime fields in webflow follows this format: yyyy-MM-dd H:mm