JS - Datum en tijd gebruiken

Met behulp van JavaScript kunnen allerlei mogelijkheden van datum en tijd in een document worden opgenomen. Veel daarvan vallen buiten het bestek van de Handleiding HTML. Hier worden daarom slechts enkele voorbeelden van de huidige datum en tijd en de laatste wijzigingsdatum gegeven. Bij deze voorbeelden wordt gebruik gemaakt van Date object. Het volgende script, geplaatst in de body van het document, geldt de basis voor de gebruikte voorbeelden. Het geeft de datum en tijd bij openen van het document weer.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
nu = new Date();
document.write(nu);
//-->
</SCRIPT>


De uitkomst van het script is:


Deze uitkomst zal niet voor elke browser hetzelfde zijn. Bovendien is het niet een erg aantrekkelijke manier om de datum en de tijd weer te geven. Daarom worden in de voorbeelden verschillende methoden van het Date object gebruikt om de weergave te bepalen: getDate, getDay,getMonth, getYear, getHours, getMinutes en getSeconds.

De volgende voorbeelden worden gegeven:


De huidige datum

Door gebruik te maken van de methodes getDate, getMonth en getYear worden uit het Date object respectievelijk de dag van de maand, de maand en het jaar gehaald.


De huidige datum is:


In de body van dit document is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var nu = new Date();
var dag = nu.getDate();
var dag2 = ((dag < 10) ? "0" : "") + dag;
var maand = nu.getMonth() + 1;
var maand2 = ((maand < 10) ? "0" : "") + maand;
var jaar = nu.getYear();
var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

document.write(dag2 + "-" + maand2 + "-" + jaar4);
//-->
</SCRIPT>

Omdat in JavaScript de maand januari correspondeert met "0", wordt getMonth met 1 verhoogd. De variabelen "dag2" en "maand2" zorgen ervoor dat de dag en de maand altijd met twee cijfers worden weergegeven: voor de getallen 1 t/m 9 wordt een "0" geplaatst. De variabele "jaar4" wordt gebruikt om het jaar in 4 cijfers weer te geven. Browsers die de eerste versie van JavaScript gebruiken (Netscape Navigator 2, Internet Explorer 3 en Opera 3) geven het jaar tot 2000 weer in twee cijfers en plaatsen er daarna een "1" voor (het jaar 2001 wordt dus weergeven als 101). Door te testen op kleiner of groter dan 1900 en de waarde zonodig te verhogen met 1900, wordt het script millennium-proof gemaakt.


Door met arrays te werken kunnen de dag van de week (verkregen via getDay) en de maand (verkregen via getMonth) omgezet worden in tekst. Wanneer je ook de begeleidende tekst in het script opneemt, zien gebruikers van een browser die JavaScript niet ondersteunt, niets.



Het in de body van dit document gebruikte script heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}

var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag");

var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december");

var nu = new Date();
var dagtekst = dagArray[(nu.getDay()+1)];
var dag = nu.getDate();
var maandtekst = maandArray[(nu.getMonth()+1)];
var jaar = nu.getYear();
var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

var datumweergave = "Het is vandaag " + dagtekst + " " + dag + " " + maandtekst + " " + jaar4;

document.write(datumweergave);

//-->
</SCRIPT>

Omdat in JavaScript de dag van de week correspondeert met "0", wordt getDay met 1 verhoogd.


De laatste wijzigingsdatum van een document

Met behulp van de lastModified eigenschap kun je de laatste wijzigingsdatum van een document laten weergegeven. Je gebruikt daarvoor het volgende script:


<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write(document.lastModified);
//-->
</SCRIPT>


Als resultaat zie je:


Of de juiste datum verschijnt, is afhankelijk van de browser en van de informatie die de browser van de server ontvangt. Soms wordt in plaats van de laatste wijzigingsdatum de standaard startdatum (1 januari 1970) van de gebruikte JavaScript versie weergegeven.

Ook de laatste wijzigingsdatum kun je op een meer aangename manier weergeven:



Het script in de body van het document is vergelijkbaar met het gewone datumscript, alleen is de lastModified eigenschap opgenomen als parameter van het Date object. Omdat Netscape Navigator 3 in dit geval een jaar toch in twee cijfers weergeeft, is de code voor de jaarweergave iets aangepast.
Om het crashen van Netscape Navigator 2 te voorkomen, wordt het script in deze browser niet uitgevoerd. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus helemaal in het begin van het document plaatsen. Microsoft Internet Explorer 3 en Opera lager dan 3.5 kunnen ook niet met het script overweg en geven de standaarddatum weer.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function DatumWeergave(datum) {
var dag = datum.getDate();
var maand = datum.getMonth() + 1;
var maand2 = ((maand < 10) ? "0" : "") + maand;
var jaar = datum.getYear();
if (jaar < 70) {
var jaar4 = (jaar + 2000);
}
else {
var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));
}
var datumwaarde = dag + "-" + maand2 + "-" + jaar4;
return datumwaarde
}

if (!NN2) {
var gewijzigd = new Date(document.lastModified);
var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>";
}

document.write(wijzigdatum);

//-->
</SCRIPT>

Ook de laatste wijzigingsdatum kun je weer als tekst opnemen. Omdat Netscape Navigator crasht en Microsoft Internet Explorer 3 en Opera 3 niet de correcte datum retourneren, is er in dit voorbeeld voor gekozen de uitkomst door die browsers niet te laten weergeven. Ook in dit geval gebeurt dat op basis van het algemene script voor de browsertest.
Door de versies van Netscape Navigator lager dan 4.5 wordt bij de laatste wijzigingsdatum niet de correcte dag van de week wordt geretourneerd. Daarom is deze in dit voorbeeld weggelaten.



Het in de body van dit document gebruikte script heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}

var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag");

var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december");

function DatumWeergave(datum) {
var weekdag = datum.getDay() + 1;
var dag = datum.getDate();
var maand = datum.getMonth() + 1;
var jaar = datum.getYear();
if (jaar < 70) {
var jaar4 = (jaar + 2000);
}
else {
var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));
}
var datumwaarde = dagArray[weekdag] + " " + dag + " " + maandArray[maand] + " " + jaar4;
return datumwaarde
}

if (!NN2 && !IE3 && !OP3) {
var gewijzigd = new Date(document.lastModified);
var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>";

document.write(wijzigdatum);
}

//-->
</SCRIPT>


De huidige tijd

Met behulp van de methodes getHours, getMinutes en getSeconds kun je uit het Date object de huidige tijd in respectievelijk uren, minuten en seconden halen.


De tijd bij openen van dit document:


Het script in de body van het document heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

var nu = new Date();
var uren = nu.getHours();
var uren2 = ((uren < 10) ? "0" : "") + uren;
var minuten = nu.getMinutes();
var minuten2 = ((minuten < 10) ? ":0" : ":") + minuten;
var seconden = nu.getSeconds();
var seconden2 = ((seconden < 10) ? ":0" : ":") + seconden;

var tijdweergave = uren2 + minuten2 + seconden2

document.write(tijdweergave);

//-->
</SCRIPT>

In bovenstaand voorbeeld wordt de tijd bij openen van het document weergegeven. Wanneer je de tijd wilt laten lopen, dan kun je deze niet direct in het document plaatsen. Wel kun je bijvoorbeeld een tekstveld gebruiken en de inhoud daarvan na een bepaalde tijdseenheid laten wijzigen door het script.



Het script in de body van het document heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write('<FORM NAME=tijdform>');
document.write('<INPUT TYPE="text" NAME="tijdveld" SIZE="12">');
document.write('<\/FORM>');

function TijdTonen() {
var timerID = null;
var timerRunning = false;
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;

var nu = new Date();
var uren = nu.getHours();
var uren2 = ((uren < 10) ? "0" : "") + uren;
var minuten = nu.getMinutes();
var minuten2 = ((minuten < 10) ? ":0" : ":") + minuten;
var seconden = nu.getSeconds();
var seconden2 = ((seconden < 10) ? ":0" : ":") + seconden;

var tijdweergave = uren2 + minuten2 + seconden2

document.tijdform.tijdveld.value = tijdweergave;
timerID = setTimeout("TijdTonen()",1000);
timerRunning = true;
}

//-->
</SCRIPT>

De variabelen "uren2", "minuten2" en "seconden2" zorgen ervoor dat de uren, minuten en seconden altijd met twee cijfers wordt weergegeven: voor de getallen 1 t/m 9 wordt een "0" geplaatst.

De TijdTonen functie wordt automatisch verwerkt, als je deze opneemt in een aan het BODY element toegevoegde onload event handler (zie het onderdeel Scripts).

<BODY onload="TijdTonen()">
...
</BODY>


De huidige tijd in de statusbalk

Je kunt de huidige tijd ook weergeven in de statusbalk. In het volgende voorbeeld wordt de klok gestart met behulp van een button. In de praktijk zal je waarschijnlijk de klok automatisch laten starten bij het openen van het document door de onload event handler aan het BODY element toe te voegen.



Het volgende script zorgt voor de klok:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function StatusTijd() {
var timerID = null;
var timerRunning = false;
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;

var nu = new Date();
var uren = nu.getHours();
var uren2 = ((uren < 10) ? "0" : "") + uren;
var minuten = nu.getMinutes();
var minuten2 = ((minuten < 10) ? ":0" : ":") + minuten;
var seconden = nu.getSeconds();
var seconden2 = ((seconden < 10) ? ":0" : ":") + seconden;

var tijdweergave = uren2 + minuten2 + seconden2

window.status = tijdweergave;
timerID = setTimeout("StatusTijd()",1000);
timerRunning = true;
}

//-->
</SCRIPT>

De button is ook met behulp van een script opgebouwd en dus alleen zichtbaar als de browser JavaScript ondersteunt.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write('<FORM>');
document.write('<INPUT TYPE="button" VALUE="Start klok" onclick="StatusTijd()">');
document.write('<\/FORM>');
//-->
</SCRIPT>

Wanneer je de klok automatisch wilt laten starten bij het openen van het document, dan laat je de knop achterwege en voeg je aan het BODY element de onload event handler toe.

<BODY onload="StatusTijd()">
...
</BODY>


Welkomstbericht afhankelijk van de tijd

Door te testen hoe laat het is, kun je een bezoeker met een aan het dagdeel aangepast bericht begroeten.



Het in de body van dit document gebruikte script heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}

var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag");

var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december");

var nu = new Date();
var dagtekst = dagArray[(nu.getDay()+1)];
var dag = nu.getDate();
var maandtekst = maandArray[(nu.getMonth()+1)];
var jaar = nu.getYear();
var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

var datumweergave = dagtekst + " " + dag + " " + maandtekst + " " + jaar4;

var uren = nu.getHours();
var uren2 = ((uren < 10) ? "0" : "") + uren;
var minuten = nu.getMinutes();
var minuten2 = ((minuten < 10) ? ":0" : ":") + minuten;

var tijdweergave = uren2 + minuten2

if (nu.getHours() >= 18)
var welkom = ("Goedenavond, ");
else if (nu.getHours() >= 12)
var welkom = ("Goedemiddag, ");
else if (nu.getHours() >= 6)
var welkom = ("Goedemorgen, ");
else
var welkom = ("Goedenacht, ");

var bericht = welkom + "je hebt dit document geopend op " + datumweergave + " om " + tijdweergave + " uur.";

document.write(bericht);

//-->
</SCRIPT>

Inhoud   Inhoud Handleiding HTML   Overzicht JavaScript voorbeelden   Inhoud JS - Datum en tijd gebruiken


De gebruikte style sheets voldoen aan CSS 2 Dit document voldoet aan HTML 4.01 Laatste wijziging 25 juli 2000
Copyright © 1995-2000 Hans de Jong