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?
)