Tutorial: Inhalte automatisch je nach Monat ein- und ausblenden

JavaScript Tutorial - Elemente je nach Datum ein- oder ausblenden

Dieses Tutorial zeigt, wie Inhalte automatisch ein- und ausgeblendet werden können, je nachdem welcher Monat aktuell ist. Dieses Beispiel kann natürlich auch auf ein bestimmtes Datum/Jahr oder auf Zeiträume angepasst werden.

Der nachfolgende Code kann entweder im Header oder Footer eingefügt werden (hierzu noch <script> vor und </script> nach dem Code hinzufügen) oder bei der Nutzung eines CMS, wie WordPress, in das Custom JavaScript Feld Ihres Themes oder Ihres Plugins.

Kurzerklärung des Codes: 

  • const d = new Date(); – erzeugt ein Datumsobjekt (heute).
  • d.getMonth(); – liefert den aktuellen Monat als Zahl 0-11.
  • monthIds[index] – entspricht dem Monatsnamen zur Zahl.
  • el.style.display – “inline” zeigt das Element, “none” blendet es aus.

Code – Nach Monat:

document.addEventListener('DOMContentLoaded', () => {
const monthIds = [
'January', 'February', 'March', 'April',
'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'
];

const current = new Date().getMonth(); // 0–11

monthIds.forEach((id, index) => {
const el = document.getElementById(id);
if (!el) return; // skip if element not found
el.style.display = index === current ? 'inline' : 'none';
});
});

Code – Bestimmtes Datum:

function toggleElementByDate(elementId, targetDate, showMode = 'equals') {
const today = new Date(); today.setHours(0, 0, 0, 0);
const target = new Date(targetDate); target.setHours(0, 0, 0, 0);

let shouldShow = false;
switch (showMode) {
case 'after': shouldShow = today >= target; break;
case 'before': shouldShow = today <= target; break;
default: shouldShow = today.getTime() === target.getTime();
}

const el = document.getElementById(elementId);
if (el) el.style.display = shouldShow ? 'inline' : 'none';
}

function toggleElementBetweenDates(elementId, startDate, endDate) {
const today = new Date(); today.setHours(0, 0, 0, 0);
const start = new Date(startDate); start.setHours(0, 0, 0, 0);
const end = new Date(endDate); end.setHours(0, 0, 0, 0);

const shouldShow = today >= start && today <= end;

const el = document.getElementById(elementId);
if (el) el.style.display = shouldShow ? 'inline' : 'none';
}

document.addEventListener('DOMContentLoaded', () => {

// Beispiel 1: Nur am 24. 12. anzeigen
toggleElementByDate('ChristmasPromo', '2025-12-24');

// Beispiel 2: Ab 1. 7. dauerhaft anzeigen
toggleElementByDate('SummerSale', '2025-07-01', 'after');

// Beispiel 3: Bis 30. 4. anzeigen
toggleElementByDate('EarlyBird', '2025-04-30', 'before');

// Beispiel 4: Zwischen 1. und 16. Januar 2025 anzeigen
toggleElementBetweenDates('WinterPromo', '2025-01-01', '2025-01-16');
});

Kurzübersicht – wichtigste Code-Bausteine

  • document.addEventListener('DOMContentLoaded', …) Wartet, bis das gesamte DOM geladen ist, bevor irgend­etwas manipuliert wird.
  • toggleElementByDate(elementId, targetDate, showMode = 'equals') Ein-/Ausblenden an einem Stichtag oder relativ dazu
    • elementId – ID des anzupassenden Elements.
    • targetDate – Datum, an dem etwas passieren soll (ISO-String oder Date).
    • showMode –
      • ‚equals‘ → nur an diesem Tag anzeigen,
      • ‚after‘ → ab diesem Tag (inkl.) anzeigen,
      • ‚before‘ → bis zu diesem Tag (inkl.) anzeigen.
    • Vergleicht je nach Modus und setzt el.style.display auf ‚inline‘ oder ’none‘.
  • toggleElementBetweenDates(elementId, startDate, endDate) Anzeigen innerhalb eines Intervalls
    • Zeigt das Element nur, wenn heute zwischen Start- und Enddatum (je inkl.) liegt.
    • Auch hier werden alle drei Daten auf 00:00 Uhr gesetzt, um rein kalendarisch zu vergleichen.
  • today.setHours(0, 0, 0, 0) Nullt Stunden, Minuten, Sekunden und Millisekunden → Vergleich erfolgt nur auf Tages­ebene.
  • const el = document.getElementById(elementId) Holt das Element; existiert es nicht, wird einfach nichts geändert (keine Fehler).
  • el.style.display = shouldShow ? 'inline' : 'none'; Entscheidet per Ternary-Operator, ob das Element sichtbar ist.
  • Beispielaufrufe
    • Nur am 24. 12.: toggleElementByDate('ChristmasPromo', '2025-12-24');
    • Ab 1. 7.: toggleElementByDate('SummerSale', '2025-07-01', 'after');
    • Bis 30. 4.: toggleElementByDate('EarlyBird', '2025-04-30', 'before');
    • Zwischen 1.-16. 1. 2025: toggleElementBetweenDates('WinterPromo','2025-01-01','2025-01-16');
    • Hinweis: „ChristmasPromo“, „SummerSale“ etc. sind Beispiel-IDs für Elemente, die Sie, je nach Bedingung, ein- oder ausblenden möchten