JS Datum en tijd gebruiken

Handleiding HTML Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin


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 zo nodig te verhogen met 1900, is 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:


N.B. Wanneer je een document met dit script offline op je eigen systeem bekijkt, zie je in het algemeen de correcte laatste wijzigingsdatum. Of je de juiste datum ook online te zien krijgt, is afhankelijk van de informatie die de browser van de server ontvangt. Indien de server de Last-Modified informatie niet in de zogenaamde HTTP-header meestuurt, wordt in plaats van de laatste wijzigingsdatum door Mozilla, Netscape Navigator en Opera de datum 1 januari 1970 (de standaard startdatum van JavaScript) weergegeven en door Microsoft Internet Explorer de huidige datum. Wanneer je wilt weten welke header een server meestuurt, kun je de URL van een document op deze server invoeren in Delorie's HTTP Header Viewer.

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.

<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
}

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.



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
}

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>


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 onderdeel | Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 december 2017