'Format Intl.DateTimeFormat Locale options

After some help here, some online reading, and some headaches, we have managed to get the current time of Rome and updated constantly as if it was in real-time. Now I am trying to format the way date/time are displayed, but I cannot modify some parameters.

Here is my code:

let timer = setInterval(updateTime, 0);

function updateTime() {
    const localeOptions = {
        timeZone: 'Europe/Rome',
        dateStyle: 'full',
        timeStyle: 'short',
        formatMatcher: 'day, month, year',
        year: '2-digit'
    };
    const timetag = document.getElementById('timetag');
    const url = "https://worldtimeapi.org/api/timezone/Europe/Rome"
    fetch(url).then(r => r.json()).then(r => {
        const d = new Date(r.datetime);
        timetag.innerText = d.toLocaleString('it-IT', localeOptions)
    });
}

Everything works until I insert the formatMatcher and the year in 2-digits. I'm following the parameters from here so I wonder what is making everything breaking?

Here the JSFiddle of the timer.

My goal is to have something like 16 APR | 14:06, or at least the closer possible to something minimal in its details and space being taken on screen.

What's wrong in the code, especially in the formatMatcher and year? They break everything ¯_(ツ)_/¯



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source