HTML - Datum anzeige (heute + - Tage)

fados · 29.01.2024

Hallo,

wie brauche auf eine html Seite einige Datums anzeige.

Ausgangspunkt ist immer das heutige Datum.

Ich brauche dann folgende Datumanzeigen:

heute -30 Tage
heute -45 Tage
heute -60 Tage
heute +28 Tage
heute +40 Tage
heute +90 Tage
heute +180 Tage

Es muss die Monate mit 30/31 Tage und Februar mit 28/29 Tage berücksichtigt werden.

Kann mir hier jemand helfen?

Danke vor ab

scatello · 30.01.2024

fados schrieb:
Kann mir hier jemand helfen?

Wobei? Was hast du bisher versucht? Mit HTML alleine wird das nicht gehen.

Sempervivum · 30.01.2024

Hallo fados und willkommen im Forum!
Sieh dir diese Demo an, da kannst Du ablesen, wie man so etwas macht:

Code:

    <span id="date-plus-14"></span>
    <span id="date-minus-30"></span>
    <script>
        function dateOffest(offsetDays, selDest) {
            // Aktuelles Datum bereit stellen:
            const dte = new Date();
            // Offset in Tagen aufaddieren:
            dte.setDate(dte.getDate() + offsetDays);
            // Lokalen String für das Datum erzeugen:
            const dateStr = dte.toLocaleDateString();
            // und in Zielement eintragen:
            document.querySelector(selDest).textContent = dateStr;
        }
        dateOffest(14, '#date-plus-14');
        dateOffest(-30, '#date-minus-30');
    </script>

fados · 30.01.2024

Die Erweiterungen habe ich hinbekommen.
Was ich noch brauche ist, vor dem Datum noch die Angabe welches es ist.

zB.:
heute -30 Tage
heute +45 Tage

Sempervivum · 30.01.2024

Das kannst Du problemlos in die Ausgabe einbauen:

Code:

        function dateOffest(offsetDays, selDest) {
            // Aktuelles Datum bereit stellen:
            const dte = new Date();
            // Offset in Tagen aufaddieren:
            dte.setDate(dte.getDate() + offsetDays);
            // Lokalen String für das Datum erzeugen:
            const dateStr = dte.toLocaleDateString();
            // und in Zielement eintragen:
            let sign = '';
            if (offsetDays > 0) sign = '+';
            document.querySelector(selDest).textContent = `heute ${sign}${offsetDays} Tage: ${dateStr}`;
        }

fados · 30.01.2024

Sorry, war mein Fehler

so soll es ausgegeben werden:
Heute: x
-14 Tage: x
+28 Tage: x
-100 Tage: x
+180 Tage: x

Sempervivum · 30.01.2024

OK, wenn Du das so hübsch ausgerichtet haben möchtest, machen wir das am besten mit einer Beschreibungsliste und Gridlayout:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <style>
        dl {
            display: inline-grid;
            grid-template-columns: auto auto;
            column-gap: 1em;
        }
        dd {
            margin: 0;
        }
    </style>
</head>
<body>
    <dl></dl>
    <script>
        function dateOffest(offsetDays, selDest) {
            // Aktuelles Datum bereit stellen:
            const dte = new Date();
            // Offset in Tagen aufaddieren:
            dte.setDate(dte.getDate() + offsetDays);
            // Lokalen String für das Datum erzeugen:
            const dateStr = dte.toLocaleDateString('de-DE',
                { year: 'numeric', month: '2-digit', day: '2-digit' });
            // und in Zielement eintragen:
            let dtContent = 'Heute:'
            if (offsetDays != 0) {
                let sign = '';
                if (offsetDays > 0) sign = '+';
                dtContent = `Heute ${sign}${offsetDays} Tage:`;
            }
            // HTML für dt und dd vorbereiten:
            const html = `<dt>${dtContent}</dt><dd>${dateStr}</dd>`;
            // und am Ende in die Liste eintragen:
            document.querySelector(selDest).insertAdjacentHTML('beforeend', html);
        }
        dateOffest(0, 'dl');
        dateOffest(14, 'dl');
        dateOffest(-30, 'dl');
    </script>
</body>
</html>

fados · 30.01.2024

super Danke