Kalenderwoche und Tage anzeigen mit Moment.js

Momente sind ja, sagen manche, die einzigen Wahrheiten im Leben. Schön wenn man sie bewusst erlebt und schön auch, wenn man sie mit JavaScript darstellen kann.

Im hier beschrieben Fall bestand die Herausforderung darin, die gegenwärtige und nächste Kalenderwoche (KW) samt der darin befindlichen Mon- und Freitage mit Datum anzuzeigen, also etwa so:

KW 8 vom 19.02 bis zum 23.02
KW 9 vom 26.02 bis zum 02.03

Im Juli soll das dann, ohne dass redaktionell etwas angefasst werden muss, so aussehen:

KW 28 vom 09.07 bis zum 13.07
KW 29 vom 16.07 bis zum 20.07

Dahinter befinden sich PDF-Links, was uns aber hier nicht zu interessieren braucht.

Beim googlen nach einer Lösung traf ich bald auf Moment.js, das mir vom Namen her bereits bekannt war und das ich schon immer mal einsetzen wollte.
Zunächst also die Ermittlung und Ausgabe der aktuellen (und der nächsten) Kalenderwoche. Das geht so:

var kalenderwoche1 = moment().isoWeek();
var kalenderwoche2 = parseInt(kalenderwoche1 + 1);

Das HTML sieht rudimentär so aus:

...
<head>
  ...
  <script src="js/moment-with-locales.min.js" type="text/javascript"></script
  ...
</head>
<body>
  ...
  <strong>KW <span class="kalenderwoche-1"></span></strong>
  ...
  <strong>KW <span class="kalenderwoche-2"></span></strong>
  ...
</body>
...

Zusammen mit jQuery bekommt man die KW Zahlen also leicht in die spans:

$(document).ready(function() {
  ...
  $('.kalenderwoche-1').text(kalenderwoche1);
  $('.kalenderwoche-2').text(kalenderwoche2);
})

Das ist schon mal gut und in seiner Einfachheit unschlagbar – verglichen mit anderen JavaScript Lösungen zur Ermittlung der KW.

Das Datum der zur jeweiligen KW gehörenden Wochentage war auch nicht schwierig. Zunächst ermittle ich Montag und Freitag der aktuellen Woche:

ersterMontag = moment().isoWeekday(1);
ersterFreitag = moment().isoWeekday(5);

dann die der Folgewoche:

zweiterMontag = moment().isoWeekday(8);
zweiterFreitag = moment().isoWeekday(12);

Mit am schönsten an Moment.js ist das Formatieren, allein schon die Doku dazu ist zum mit-der-Zunge-schnalzen: https://momentjs.com/#multiple-locale-support. Ich brauchte es aber nur ganz einfach:

moment.locale('de');
...
var ausgabeErsterMontag = ersterMontag.format('DD.MM');

Im Ganzen also ungefähr so:

...
<head>
  ...
  <script src="js/moment-with-locales.min.js" type="text/javascript"></script
  ...
</head>
<body>
  ...
  <strong>KW <span class="kalenderwoche-1"></span></strong>: <a href="pfad/pdf.pdf-fuer-kw1" target="_blank">vom <span class="ausgabe-erster-montag"></span> bis zum <span class="ausgabe-erster-freitag"></span></a>
  ...
  <strong>KW <span class="kalenderwoche-2"></span></strong>: <a href="pfad/pdf.pdf-fuer-kw2" target="_blank">vom <span class="ausgabe-zweiter-montag"></span> bis zum <span class="ausgabe-zweiter-freitag"></span></a>
  ...
</body>
...
$(document).ready(function() {
  moment.locale('de');
 
  var kalenderwoche1 = moment().isoWeek();
  var kalenderwoche2 = parseInt(kalenderwoche1 + 1);
 
  ersterMontag = moment().isoWeekday(1);
  ersterFreitag = moment().isoWeekday(5);
  zweiterMontag = moment().isoWeekday(8);
  zweiterFreitag = moment().isoWeekday(12);
 
  var ausgabeErsterMontag = ersterMontag.format('DD.MM');
  var ausgabeErsterFreitag = ersterFreitag.format('DD.MM');
  var ausgabeZweiterMontag = zweiterMontag.format('DD.MM');
  var ausgabeZweiterFreitag = zweiterFreitag.format('DD.MM');
 
  $('.kalenderwoche-1').text(kalenderwoche1);
  $('.kalenderwoche-2').text(kalenderwoche2);
 
  $('.ausgabe-erster-montag').text(ausgabeErsterMontag);
  $('.ausgabe-erster-freitag').text(ausgabeErsterFreitag);
  $('.ausgabe-zweiter-montag').text(ausgabeZweiterMontag);
  $('.ausgabe-zweiter-freitag').text(ausgabeZweiterFreitag);
})

Ein Framework, das Spaß macht.