Dean Fogarty

Dean Fogarty

/ home / technical / svelte / timezones

Display the current date and time from multiple timezones.

Our goal?

We want to display the current time for a number of locations around the world as a table:

America/New_York Sunday, April 3, 2022, 17:40:05
Europe/London Sunday, April 3, 2022, 22:40:05
Asia/Tokyo Monday, April 4, 2022, 06:40:05
Australia/Brisbane Monday, April 4, 2022, 07:40:05


Create a component that periodically uses Date().toLocaleString() to format the current local time in arbitrary timezones and display as a table.

onMount / onDestroy

We can use Svelte’s lifecycle functions onMount() and onDestroy() to initialise and cleanup a periodic timer. The timer will get the date and update a reactive varible, which will redraw the table when changed.

The component

A single component fulfills our requirements (say ./TimeZoneTable.svelte):

    import { onMount, onDestroy } from 'svelte';

    export let timezones = [

    const locale = 'en-US';

    let now = new Date();
    let intervalId;

    onMount(() => {
        intervalId = setInterval(() => {
            now = new Date();
        }, 1000);

    onDestroy(() => {
        if (intervalId) {

    {#each timezones as z}
            <td>{now.toLocaleString(locale, { timeZone: z })</td>


Use the component wherever it’s required:

    import TimeZoneTable from './TimeZoneTable.svelte';

<TimeZoneTable />


We created a simple method for displaying the time in differen timezones around the world.

More information