JavaScript Datumske funkcije in lastnosti: toLocaleDateString()

Metoda toLocaleDateString() pretvori datumski del objekta Date v niz glede na lokalne nastavitve. To je posebej uporabno za prikaz datumov v formatu, ki je značilen za določeno državo ali regijo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript toLocaleDateString() – osnovni primeri</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        .rezultat { 
            border: 1px solid #ddd; 
            padding: 15px; 
            margin: 10px 0; 
            border-radius: 4px; 
        }
        .skupina { 
            border: 1px solid #ddd; 
            padding: 15px; 
            margin: 12px 0; 
            border-radius: 4px; 
        }
        .opis { 
            margin: 0 0 8px; 
            font-weight: 600; 
        }
        .vrstica { 
            margin: 4px 0; 
        }
        code { 
            padding: 1px 6px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; 
            font-size: 0.95em; 
        }
        .izpis { 
            border: 1px dashed #ccc; 
            padding: 8px; 
            border-radius: 4px; 
            margin-top: 6px; 
        }
    </style>
</head>
<body>
    <div class="rezultat">
        <p class="vrstica">Izhodišče (fiksna UTC točka): <strong><span id="izhodisceInfo"></span></strong></p>
        <p class="vrstica">
            <em>Opomba:</em> <code>toLocaleDateString(locale?, options?)</code> vrne datum kot niz, formatiran 
            glede na izbrano lokalizacijo in možnosti. Čas se ne prikazuje (le datum). Časovni pas lahko vpliva 
            na dan (če je blizu polnoči).
        </p>
    </div>
    
    <div class="skupina">
        <p class="opis">1) Osnovni prikaz v sl-SI</p>
        <p class="vrstica">Koda: <code>d.toLocaleDateString('sl-SI')</code></p>
        <div class="izpis">
            Rezultat: <strong><span id="p1"></span></strong>
        </div>
        <p class="vrstica">Pojasnilo: uporabi privzeti slovenski zapis datuma.</p>
    </div>
    
    <div class="skupina">
        <p class="opis">2) Z možnostmi oblikovanja (dan 2‑mestno, mesec z besedo)</p>
        <p class="vrstica">Koda: 
        <code>d.toLocaleDateString('sl-SI', { day:'2-digit', month:'long', year:'numeric' })</code></p>
        <div class="izpis">
            Rezultat: <strong><span id="p2"></span></strong>
        </div>
        <p class="vrstica">Pojasnilo: mesec je izpisan z besedo, dan ima vodilno ničlo.</p>
    </div>
    
    <div class="skupina">
        <p class="opis">3) Različne lokalizacije (en-GB, de-DE, ja-JP)</p>
        <p class="vrstica">Koda: 
            <code>d.toLocaleDateString('en-GB')</code>, 
            <code>d.toLocaleDateString('de-DE')</code>, 
            <code>d.toLocaleDateString('ja-JP')</code>
        </p>
        <div class="izpis">
            en‑GB: <strong><span id="p3en"></span></strong><br>
            de‑DE: <strong><span id="p3de"></span></strong><br>
            ja‑JP: <strong><span id="p3ja"></span></strong>
        </div>
        <p class="vrstica">Pojasnilo: različne lokalizacije prikažejo datum v drugačnih zapisih.</p>
    </div>
    
    <div class="skupina">
        <p class="opis">4) Vpliv časovnega pasu (UTC vs. New York vs. Tokio)</p>
        <p class="vrstica">Koda: <code>d.toLocaleDateString('sl-SI', { timeZone: 'UTC' })</code> ipd.</p>
        <div class="izpis">
            UTC: <strong><span id="p4utc"></span></strong><br>
            America/New_York: <strong><span id="p4ny"></span></strong><br>
            Asia/Tokyo: <strong><span id="p4tokyo"></span></strong>
        </div>
        <p class="vrstica">Pojasnilo: če je trenutek blizu polnoči, lahko različni časovni pasovi pokažejo 
            različne dni.</p>
    </div>
    
    <script>
        // Pomožna: lep prikaz izhodišča
        function opisIzhodisca(d) {
            return d.toUTCString() + ' (UTC)';
        }
        
        // Izhodišče: 5. jul 2024 23:30:00.000 UTC (blizu polnoči za lep prikaz razlik)
        const izhodisce = new Date(Date.UTC(2024, 6, 5, 23, 30, 0, 0));
        document.getElementById('izhodisceInfo').textContent = opisIzhodisca(izhodisce);
        
        // 1) Osnovno sl-SI
        (function () {
            const d = new Date(izhodisce);
            document.getElementById('p1').textContent = d.toLocaleDateString('sl-SI');
        })();
        
        // 2) Z možnostmi
        (function () {
            const d = new Date(izhodisce);
            document.getElementById('p2').textContent = d.toLocaleDateString('sl-SI', {
                day: '2-digit', month: 'long', year: 'numeric'
            });
        })();
        
        // 3) Različne lokalizacije
        (function () {
            const d = new Date(izhodisce);
            document.getElementById('p3en').textContent = d.toLocaleDateString('en-GB');
            document.getElementById('p3de').textContent = d.toLocaleDateString('de-DE');
            document.getElementById('p3ja').textContent = d.toLocaleDateString('ja-JP');
        })();
        
        // 4) Časovni pasovi
        (function () {
            const d = new Date(izhodisce);
            document.getElementById('p4utc').textContent = d.toLocaleDateString('sl-SI', 
            { timeZone: 'UTC' });
            document.getElementById('p4ny').textContent = d.toLocaleDateString('sl-SI', 
            { timeZone: 'America/New_York' });
            document.getElementById('p4tokyo').textContent = d.toLocaleDateString('sl-SI', 
            { timeZone: 'Asia/Tokyo' });
        })();
    </script>
</body>
</html>

REZULTAT

Interaktivni preizkus: izberi datum, področje (locale) in slog prikaza (dateStyle) ter takoj poglej rezultat toLocaleDateString(). V “Primerjava formatov” vidiš vse štiri sloge (full, long, medium, short) za izbrano področje, v “Posebni primeri” pa nekaj pogostih nastavitev (npr. samo dan in mesec, datum z dnevom v tednu, številčni zapis). Primer uporablja options.dateStyle in poskrbi za začetno vrednost (današnji datum). Če je vnos neveljaven, bo izpisal napako.

Izberi datum in nastavitve:

Izberi datum:

Izberi področje:

Slog prikaza:

JavaScript Datumske funkcije in lastnosti: toLocaleDateString()

Izberi datum in nastavitve:

Rezultat:

Primerjava formatov:

Posebni primeri: