Best-Before Date mit jQuery

Beitrag veröffentlicht am: 7. Juli 2012

Wie auf der Website der Fotografin Corinna Streitz zu sehen ist, werden aktuelle Ausstellungen mit einem grünen Stern hervorgehoben. Damit nach Ablauf der Ausstellungszeit dieser Marker automatisch verschwindet, habe ich einen kleinen Codeschnipsel in jQuery geschrieben.

Schritt 1 – Das Element im HTML-Quelltext

<span id="stern" class="green 20120908">&#9733;</span>

Das Mindesthaltbarkeitsdatum (MHD) wird als letzte Klasse im Format (JJJJMMDD) dem Element mitgegeben.

Schritt 2 – Die CSS-Definitionen

.green { color:#009F00; }
.transparent { color:transparent; }

Schritt 3 – Der jQuery-Schnipsel

$(document).ready(function() {
  var d = new Date(); // aktuelles Datum generieren
  var dat = d.getDate(); // aktueller Tag von 1 bis 31
  if(dat < 10){ dat="0"+dat }; // wenn Tag einstellig, dann 0 davor (01 bis 09)
  var mon = d.getMonth()+1; // aktueller Monat von 1 bis 12
  if(mon < 10){ mon="0"+mon }; // wenn Monat einstellig, dann 0 davor (01 bis 09)
  var year = d.getFullYear(); // aktuelles Jahr
  var todayDate = year+""+mon+""+dat; // Datum zusammenbauen im Format: jjjjmmtt
  $('span#stern').each(function() { // alle span-Elemente mit id="stern"
    var classes = $(this).attr("class").split(/\\s/); // Klassen einzeln in Array einlesen
    classDate = classes[classes.length -1]; // letzte Klasse aus Array herauslesen
    if(classDate > todayDate){ $(this).removeClass('transparent').addClass('green'); }; // wenn MHD groesser als aktuelles Datum ist, dann von .green auf .transparent stellen
  });
});

Varianten

Selbstverständlich kann der Einsatz variiert werden. Herzstück ist das Herausfiltern des MHD aus der Klassendefinition und der anschließende Vergleich von aktuellem Datum und MHD. Ob dann die Sichtbarkeit des Elements, wie in diesem Beispiel, gesteuert wird oder per .html() entsprechender Code zugefügt wird, kann der Programmierer nach Belieben entscheiden.

Ich hoffe, der kleine Ausflug in die Architektur von Programmiercode hat gefallen.

« JiS – A Sneak Preview  Blog  Willkommener Gast »