Adjust code to create a banner message with Browser Time Zone

Hello! I’ve got some code working on my Softr app that allows me to display the timezone to the user. The times in Airtable are set to Pacific and updating natively over in Softr but do not display the timezone.

To help users with this, I wanted to display a message at the top of every page that tells them what Timezone they are in.

<script>
// Function to detect user's time zone
function getUserTimeZone() {
    return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

// Function to convert time data to user's time zone
function convertToUserTimeZone(timeData, userTimeZone) {
    return moment.tz(timeData, userTimeZone).format('YYYY-MM-DD HH:mm:ss');
}

// Function to split date and time into separate lines and include timezone
function formatDateTimeWithTimeZone(dateTime, timeZone) {
    const [date, time] = dateTime.split(' ');
    return `${date}<br>${time}<br>${timeZone}`;
}

// Wait for the DOM to load
document.addEventListener('DOMContentLoaded', function () {
    // Detect user's time zone
    const userTimeZone = getUserTimeZone();

    // Select all elements that contain the time data (assuming a class name 'time-data')
    const timeElements = document.querySelectorAll('.time-data');

    // Convert and update the time data for each element
    timeElements.forEach(function (element) {
        const timeData = element.getAttribute('data-time'); // Get the original time data from a data attribute
        const convertedTime = convertToUserTimeZone(timeData, userTimeZone);
        const formattedDateTime = formatDateTimeWithTimeZone(convertedTime, userTimeZone);
        element.innerHTML = `Local Time:<br>${formattedDateTime}`;
    });
});
</script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>

The above code adjusts the Airtable data to display in the browsers time zone.

Now I’d like to display a notification bar message at the top of the page that tells the user what time zone they are located in.

How do I add the function displayUserTimeZone to the banner tutorial that Softr provided?
Or do you have another way?

Hi,

Could you insert this in the footer custom code (app level or pages level):
And let me know if it works.
Some possible optimizations: display it only for logged in users or display it on all pages except certain pages or display it only for logged in users AND certain pages.

<script>
function getUserTimeZone() {
    return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

configObj = {
    "text": "",
    "selectedBackgroundColor": "#69C3FF",
    "selectedTextColor": "#181818",
    "bannerHeight": "56px",
    "fontSize": "15px"
};

function createBanner(obj, pageSimulator) {
    var swBannerText = obj.text;
    var body = document.body;
    var swBanner = document.createElement('div');
    var centerDiv = document.createElement('div');
    var text = document.createElement('span');
    
    swBanner.style.display = "flex";
    swBanner.style.justifyContent = "center";
    swBanner.style.alignItems = "center";
    swBanner.style.width = "100%";
    swBanner.style.minHeight = "40px";
    swBanner.style.maxHeight = "72px";
    swBanner.style.paddingTop = "8px";
    swBanner.style.paddingBottom = "8px";
    swBanner.style.lineHeight = "12px";
    swBanner.style.textAlign = "center";
    swBanner.style.textDecoration = "none";
    swBanner.style.height = obj.bannerHeight;
    swBanner.style.fontSize = obj.fontSize;
    text.innerHTML = swBannerText;
    swBanner.style.backgroundColor = obj.selectedBackgroundColor;
    swBanner.style.color = obj.selectedTextColor;
    swBanner.id = 'sw-banner';
    swBanner.classList.add('sw-banner');
    centerDiv.classList.add('center');
    centerDiv.append(text);
    swBanner.append(centerDiv);
    
    if (!pageSimulator) {
        body.insertBefore(swBanner, body.firstChild);
    } else {
        pageSimulator.insertBefore(swBanner, pageSimulator.firstChild);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const userTimeZone = getUserTimeZone();
    configObj.text = `You are in the ${userTimeZone} timezone.`;
    createBanner(configObj, null);
});
</script>

Holy crap! Matthieu, that totally worked. Thank you SO SO MUCH!

You’re welcome!
(@Jjenglert I don’t know who flagged the initial post but it should not be flagged :thinking:)

1 Like

Fixed

1 Like