JavaScript Datum

Erster Mittwoch des Monats - date() getDay()

Das Modul findet das erste Vorkommen eines Wochentages für den aktuellen Monat und für den Folgemonat. Im Beispiel wende ich das für den Mittwoch an. Beginnend beim 1. des Monats wird eine Schleife durchlaufen und der Tageswert jedes Mal um 1 erhöht. Mit getDay() wird dabei der Tag der Woche ermittelt. Für den Mittwoch so lange, bis das Ergebnis "3" ist.
0 = Sonntag, 1 = Montag, 2 = Dienstag, 3 = Mittwoch, ...

Rubrik Datum

Anwendungsbereich Terminankündigung

An jedem ersten Mittwoch des Monats, ...

Monatliche Radtour Velo-Club Geilenkirchen
Online-Elternsprechstunde Klasse 7
Team-Besprechung Base A
Hospiz Trauersprechstunde
Entsorgung Papiermüllabfuhr

Im Beispiel wird das Datum des ersten Mittwochs im aktuellen Monat und im Folgemonat ermittelt. Natürlich kann man das Modul anpassen und die Termine für jeden 3. Dienstag des Monats berechnen lassen.

Der Text mit dem berechneten Datum wird zur Anzeige über eine Grafik gelegt. Mit onClick() hat man die Wahl, den Termin für den Folgemonat berechnen und anzeigen zu lassen. Für die Interaktion wurden zwei Buttons definiert. Der entsprechende Button wird unterhalb der Grafik angezeigt bzw. ausgeblendet.

An jedem ersten Mittwoch des Monats

Termin für diesen Monat anzeigen

Termin für nächsten Monat anzeigen

JavaScript-Code-Schnipsel für dieses Modul

Avatar Mit JavaScript haben Sie Einfluss auf das im Browserfenster angezeigte HTML-Dokument und die Möglichkeit, auf Benutzeraktionen zu reagieren. Inhalte können errechnet, gefiltert, abgefragt und die Darstellung der Seite kann auch nach dem Laden noch verändert werden. Einige der in diesem Modul verwendeten Techniken sehen sie hier als Code-Schnipsel. Im Quelltext der Demo-Datei (Link weiter unten) können sie den gesamten Zusammenhang erkennen.

Die eingebundene Grafik bestimmt das Verhältnis von Höhe und Breite der Darstellung. Mit CSS-Angaben für die Box: "width:40%; height:auto;" wird die Größe der Box festgelegt.

// Wochentag festlegen 0=So, 1=Mo, 2=Di, 3=Mi, ...
let GesuchterWochentag = 3 // Mittwoch

const DatumZeitJetzt = new Date();
const MonatAktuell = DatumZeitJetzt.getMonth();
let BerechnungsDatum = new Date();
let WochentagZahl01
let Tag;

function Berechnen01() {
// StartTag Suche beginnt am
Tag = 1;
BerechnungsDatum.setDate(Tag)
BerechnungsDatum.setMonth(MonatAktuell);
WochentagZahl01 = BerechnungsDatum.getDay()

while (WochentagZahl01 != GesuchterWochentag) {
  BerechnungsDatum.setDate(Tag)
  WochentagZahl01 = BerechnungsDatum.getDay()
  Tag = Tag +1
  //alert(BerechnungsDatum.toLocaleString());
  }
}

Die Zahl für den gesuchten Wochentag wird in der Variablen GesuchterWochentag abgelegt. Mittwoch = 3

Der Monatstag, ab dem die Suche starten soll, wird hier mit "1" der Variablen Tag zugeordnet.

Innerhalb einer While-Schleife wird der Monatstag für das BerechnungsDatum jedes Mal mit BerechnungsDatum.setDate(Tag); auf den neuen Wert gesetzt. Tag wird bei jedem Durchlauf hoch gezählt.

Solange die Bedingung
WochentagZahl ≠ GesuchterWochentag
erfüllt ist, wird der Durchlauf immer wieder neu gestartet.

Sobald der Durchlauf stoppt, enthält die Variable BerechnungsDatum das Datum für den ersten Mittwoch.

Falls ein anderer Wochentag gesucht wird, setzt man in GesuchterWochentag die entsprechende Zahl ein, z.B. für Freitag let GesuchterWochentag = 5 // Freitag
Möchte man den 3. Mittwoch des Monats finden, müsste man den Vergleich erst dann starten, wenn bereits 2 Wochen verstrichen sind. Der gesuchte Monatstag kann dann nicht kleiner als 15 sein. Man startet die Suche entsprechend mit Tag 15

Avatar Will man diese Operation für den Folgemonat durchführen, wird in der Variablen BerechnungsDatum der Monat von "aktueller Monat" auf "aktueller Monat + 1" geändert. Dazu steht die Methode setMonth() zur Verfügung. Der zuvor ermittelte und in der Variablen MonatAktuell abgelegte Wert für den aktuellen Monat, wird um 1 erhöht. BerechnungsDatum.setMonth(MonatAktuell + 1);

// Berechnung für den nächsten Monat
// Basisvariablen aus Berechnung aktueller Monat stehen zur Verfügung

// StartTag Suche beginnt am
Tag = 1;
BerechnungsDatum.setDate(Tag)
// Monatswert um 1 erhöhen
BerechnungsDatum.setMonth(MonatAktuell + 1);
WochentagZahl02 = BerechnungsDatum.getDay()

while (WochentagZahl02 != GesuchterWochentag) {
  BerechnungsDatum.setDate(Tag)
  WochentagZahl02 = BerechnungsDatum.getDay()
  Tag = Tag +1
  // alert(BerechnungsDatum.toLocaleString());
  }
}

Demo-Datei für erster Mittwoch des Monats

Sie können die Demo-Datei speichern und das Beispiel für ihren Zweck anpassen. Oder sie öffnen die Demo und lassen sich den Quellcode zum Kopieren anzeigen: Rechtsklick in die Seite und im Kontextmenü "Seitenquelltext anzeigen" auswählen. Ich verwende bei meinen Modulen eigene CSS-Klassen zur Positionierung und / oder Formatierung, die im Head-Bereich notiert sind. Der JavaScript-Code für diese Lösungsvariante ist innerhalb einer JavaScript-Deklaration im Head-Bereich notiert.

Unten angekommen!

Diesmal nicht gefunden was sie suchten? Kommen sie doch später noch mal vorbei.

Kaffeepause
Impressum
Datenschutz
Webmaster

Sitemap

Übersicht mit Verweisen zu den Unterseiten die bereits überarbeitet wurden Sitemap

nach oben
vorherige Seite
Sitemap
Home

Keywords

Datum Date() new Date() getDay() getFullYear() Wochentag Monat while Schleife Array Clock setMonth() setTimeout() setDate() JavaScript Script-Code Vorlagen Beispiel Modul