I’d like to add a real-time live text clock:
Can anyone help me with how-to code and implement this?
The final display would read like below:
12:58:01 AKST
Hi, Allison_Cressey !!
In simple programming tasks related to time, it’s often faster and more accurate to use AI to put together the code. So this time, I leveraged the help of AI to assemble the code.
$w.onReady(function () {
// Initial execution and update every second
setInterval(updateClock, 1000); // Runs every 1 second
updateClock(); // Immediate display when the page loads
});
function updateClock() {
// Alaska Standard Time (AKST) is UTC-9 hours
const akstOffset = -9;
// Apply Alaska Standard Time offset to UTC time
const akstTime = new Date(Date.now() + (akstOffset * 60 * 60 * 1000));
// Get hours, minutes, and seconds, and pad with zeros if needed
const hours = String(akstTime.getUTCHours()).padStart(2, '0');
const minutes = String(akstTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(akstTime.getUTCSeconds()).padStart(2, '0');
// Format the time string for display
const timeString = `${hours}:${minutes}:${seconds} AKST`;
// Display the clock in yourClockTextElem
$w("#yourClockTextElemID").text = timeString;
}
I checked from my environment (Japan Time Zone), and with this code, the time in Alaska was displayed correctly. (However, there seems to be a one-hour difference due to daylight saving time at the moment.) While I think there are no major issues with this code, there are a few points that I believe are worth noting.
First, the time that can be retrieved from frontend code depends on the device’s internal clock, so if the user’s device clock is off, the calculated Alaska time could also be inaccurate. To address this, it may be necessary to communicate with a server that provides the correct UTC time values. (A simple solution might be to return the value from Wix’s backend code.)
Also, in the code, you’re using setInterval for repeated execution. If you want to make the clock run more accurately, you could adjust the interval to a shorter value (currently set to 1000ms, but you could try something like 100ms). Lastly, regarding the string “AKST” at the end, because the width of the time text fluctuates, it may move slightly. I recommend displaying this string in a separate text element to avoid that issue. 
※ If you want a clock that can automatically handle daylight saving time (DST) and other adjustments, introducing a date library like date-fns-tz will allow for more stable time display.
import { toZonedTime, format } from 'date-fns-tz';
$w.onReady(function () {
// Initial execution and update every second
setInterval(updateClock, 1000); // Runs every 1 second
updateClock(); // Immediate display when the page loads
});
function updateClock() {
const alaskaTimezone = 'America/Anchorage';
const date = new Date();
const alaskaTime = toZonedTime(date, alaskaTimezone);
const timeString = format(alaskaTime, 'HH:mm:ss zzzz', { timeZone: alaskaTimezone });
$w("#yourClockTextElemID").text = timeString;
}
Thank you so much! How do I implement this code to the page?
I’ve added the script to my page code, but not sure what to do next??
Hi, Allison !
First, please add a text element to the page. Then, select the text element and open the coding panel. Look at the “Properties & Events” section on the right side. There, you will find a field labeled “ID,” so replace it with “yourClockTextElemID” (you can change this string to any name you like, but make sure it matches the name in your code). After that, you should be able to preview the site or check the live site to confirm that the clock is working. 
By the way, if you want to run the second code, you’ll need to install the “date-fns-tz” library on your site via npm in advance. For now, try running the first code to see the code in action. 
Got the first code to work! It’s an hour off like you mentioned, so I need to install this library after all. Appreciate all your help – how would I go about adding this library function?
For installation instructions, please refer to this article. You should be able to find it by searching for "date-fns-tz.
Ok figured out how to install the npm… this is the file i installed under the packages in wix, but now it’s not working 
**Right now I’m just seeing the text element render “00:00:00”
Here’s the code I have input:
import { toZonedTime, format } from 'date-fns-tz';
$w.onReady(function () {
// Initial execution and update every second
setInterval(updateClock, 1000); // Runs every 1 second
updateClock(); // Immediate display when the page loads
});
function updateClock() {
const alaskaTimezone = 'America/Anchorage';
const date = new Date();
const alaskaTime = toZonedTime(date, alaskaTimezone);
const timeString = format(alaskaTime, 'HH:mm:ss zzzz', { timeZone: alaskaTimezone });
$w("#yourClockTextElemID").text = timeString;
}
Hmm, I wonder why? I tried it just now, and it worked.
For now, please try rewriting it like the following.
const timeString = format(alaskaTime, 'HH:mm:ss', { timeZone: alaskaTimezone });
If the issue is not resolved…
Next, after rewriting the code like this, please open the live site and check how the logs are displayed in the browser’s developer tools.
function updateClock() {
const alaskaTimezone = 'America/Anchorage';
const date = new Date();
console.log("Current local date:", date);
const alaskaTime = toZonedTime(date, alaskaTimezone);
console.log("Alaska time (toZonedTime):", alaskaTime);
const timeString = format(alaskaTime, 'HH:mm:ss zzzz', { timeZone: alaskaTimezone });
console.log("Formatted time string:", timeString);
$w("#yourClockTextElemID").text = timeString;
}