how I can have two clocks on my page and they will be updating in real time?

Question

I have a weather website and I'm driving me crazy to figure out how I can have two clocks on my page and they will be updating in real time. One with the 'Europe/Lisbon' timezone and the and the other with the 'UTC' timezone

Now I have this code lines:

<strong>Elvas:</strong>
<?php
// set the default timezone to use. Available since PHP 5.1
date_default_timezone_set('Europe/Lisbon');

// Prints something like: Monday 8th of August 2005 03:12:46 PM
echo date('H:i');
?>

&nbsp &nbsp

<strong>UTC:</strong>
<?php
// set the default timezone to use. Available since PHP 5.1
date_default_timezone_set('UTC');

// Prints something like: Monday 8th of August 2005 03:12:46 PM
echo date('H:i');
?>

But of course with no automatic updates as I would like.

Thanks in advance for any posible help you could give to me.

Answer 1

PHP is a server-side technology. If you want to update your page in real-time, you need to stick with JavaScript.

By default, JavaScript doesn't know anything about time zones, other than the time zone of the computer it is running on. In order to display the time in some other time zone, you will need a time zone database for JavaScript. I list several of them here.

For example, you can use moment.js with the moment-timezone add-on. Getting the current time in a specific time zone is like this:

moment().tz('Europe/Lisbon').format('YYYY-MM-DD HH:mm:ss')

To update it periodically, you can use window.setInterval.

If you are looking for a very easy solution already coded for you, consider using the "Free Clocks for Your Website" offered at timeanddate.com. They are very reliable and customizable for different time zones.