Homepage » Tutorials » Javascript » Het Date-object gebruiken

Het Date-object gebruiken

Info 
Door: Mirax Moeilijkheidsgraad: 1/3
Geplaatst op: 19-10-2003Reacties: 11(Bekijken)
Views: 10588 (gem. 4.2049 per week) Log in om zelf te reageren
 Waardering:7/10 (4 stemmen)

Werken met het date object.

Als je eenmaal wat weet van JavaScript, is het leuk als je wat met de datum kan gaan werken. Zo kan je bijvoorbeeld op je website weergeven welke dag het is, of hoeveel dagen het nog is totdat het bijvoorbeeld weer sinterklaas is. Om de huidige datum te gebruiken kent JavaScript een eenvoudige code, namelijk Date(). Als je dus de datum op je site wilt neerzetten, kun je op die plaats schrijven:

#Code
1
2
3
4
5
<script type="text/javascript">
<!--
document.write(Date());
//-->
</script>

Als je dit uitvoert, zal je zien dat er Engelse termen worden gebruikt om de dag van de week, en de maand van het jaar aan te geven. Om dit te voorkomen, kun je een eenvoudige code toevoegen aan het script:

document.write(new Date().toLocaleString());

Je kunt zo ook gemakkelijk de tijd omzetten naar de Greenwich Main Time, de code wordt dan:

document.write(new Date().toGMTString());

Maar dit geeft altijd een gehele zin met alle onderdelen, misschien wil je alleen een van deze weergeven, bijvoorbeeld het jaar, of een combinatie van twee of meerdere van deze delen, bijvoorbeeld de dag en de maand. Het meest handige is om dan eerst de datum op te slaan in een variabele. De code komt er dan als volgt uit te zien:

#Code
1
2
3
4
5
6
<script type="text/javascript">
<!--
var Nu = new Date();
document.write(Nu.getTime());
//-->
</script>

Het eerste wat je opvalt is waarschijnlijk dat dit een reeks is van dertien getallen, waar je ogenschijnlijk niets aan hebt. Het tegendeel is waar. Het getTime() element geeft namelijk het aantal verstreken milliseconden aan sinds 1 januari 1970 om precies 00:00:00.

Behalve getTime(), zijn er nog een paar andere van dit soort die je kunt gebruiken om een geelte van de datum te krijgen, hieronder volgt een overzicht met een korte omschrijving:

getTime()
- Tijd in millisecondes sinds 1970
getMilliseconds()
- Geeft het huidige aantal milliseconden (= 1/100ste seconde) (0-999)
getSeconds()
- Geeft het huidige aantal secondes (0-59)
getMinutes()
- Geeft het huidige aantal minuten (0-59)
getHours()
- Geeft het huidige aantal uren (0-23)
getDate()
- Geeft de dag van de maand (1-31)
getMonth()
- Geeft de maand van het jaar (0-11)
getYear of getFullYear()
- Geeft weer welk jaar het is, in vier cijfers
getDay()
- Geeft de dag van de week weer (0 = zondag, 1= maandag … 6 = zaterdag)
getTimeZoneoffset()
- Geeft het tijdsverschil in minuten met de GMT-tijd.

Behalve de tijd ophalen, kan je ook de tijd manipuleren. Daarmee wordt bedoeld, dat je bijvoorbeeld de maand of dag ingeeft. Hiervoor gebruiken we dezelfde code, als het bovenstaande schema, alleen dan wordt get veranderd in set. Tussen de haakjes komt vervolgens de gewenste tijd te staan. Dit is een gegeven dat we erg vaak kunnen gebruiken. Met het volgende voorbeeld, zullen we het aantal dagen weergeven, tot aan het volgende Sinterklaasfeest (5 december). Dit doen we door een combinatie te gebruiken van de get en set-opties. Hieronder staat het script dat we daarvoor gebruiken:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
<!--
var nu = new Date();

var sint = new Date();
sint.setDate(5);
sint.setMonth(11);

if (nu.getMonth() == 11 && nu.getDate() > 5){
sint.setYear(nu.getYear()+1);
}
else{
sint.setYear(nu.getYear());
}

var verschil = new Date();
verschil.setTime(parseInt(sint.getTime()-nu.getTime()));
dagentegaan = Math.round(verschil.getTime()/1000/60/60/24);

document.write('Het is nog ' + dagentegaan +' dagen tot de volgende Sinterklaas');

//-->
</script>

Wat gebeurt er nu precies in dit script?
Dat zullen we stap voor stap uitleggen. We beginnen met de eerste variabele, die we Nu noemen (let op de hoofdletters), en daar verbinden we een datum aan. Vervolgens geven we de variabele Sint ook de datum mee. Maar bij deze variabelen veranderen we de maand in 11 (dat is dus december), en de dag in 5 (het Sinterklaasfeest dus). Daarna gebruiken we een if, else-functie. Deze functie berekent of het Sinterklaasfeest dit jaar al is geweest, of dit jaar nog moet komen. Moet het feest nog komen, dan verandert en er niets. Is het Sinterklaas feest al geweest, dan wordt het jaar veranderd in he huidige jaar plus 1.
Ten slotte wordt er nog een datum aangemaakt, met als naam Verschil. De tijd in milliseconde na 1970, wordt gedefinieerd als de tijd van de Sint-datum, min de tijd van de Nu-datum. In feite wordt de datum dus neergezet als een bepaalde dag in het jaar 1970. ParseInt() wordt hier gebruikt, om er zeker van te zijn dat de getallen die van elkaar afgetrokken worden ook worden behandeld als tekst, en niet als strings. Daarna wordt nog een variabele aangemaakt, en dat is de afronding (Math.round()), van de verschiltijd gedeeld door (1000*60*60*24), dus het aantal dagen dat er nog te gaan is tot het volgende Sinterklaasfeest. Als afsluiting wordt dit natuurlijk ook nog in het document zelf geschreven.

11 reacties
Mirax Geplaatst op 10-08-2009 om 12:03
 

Moderator		 De maand van het jaar is genummerd van 0 tot 11, dus je kan er eentje bij optellen als je het van 1 tot 12 wilt hebben.
branic729 Geplaatst op 28-07-2009 om 10:07
 

Regular		 Halo! leuke tutorial, heb een probleempje met de maand (getMonths), die staat namelijk 1 maand achter, heb even een site gemaakt, je kan het zelf eens bekijken: http://javadate.webs.com/date.html, wat moet ik doen?
juliusjk Geplaatst op 26-12-2008 om 11:32
 

Regular		 staat die code al op de site? als wel: waar? en als niet wat is 'm dan?
Mirax Geplaatst op 21-12-2008 om 14:00
 

Moderator		 Klopt, maar met een functie als setInterval() kun je de code die de datum weergeeft steeds opnieuw uitvoeren, en dan heb je wel een lopend klokje!
juliusjk Geplaatst op 21-12-2008 om 13:57
 

Regular		 dat met de tijd werkt. alleen blijft de tijd telkens hetzelfde. als het bijvoorbeeld 12:00 is en je wacht vijf minuten staat hij nog steeds op 12:00 en niet op 12:05...........................
bass Geplaatst op 18-09-2006 om 17:20
Avatar van bass

Regular		 @ Eldarion: natuurlijk begin je van nul te tellen het is cjavascript hoor (dan geburddit alteid)
de_jerre Geplaatst op 02-03-2006 om 18:49
 

Regular		 Dat laatste is heel goed uitgelegd moet ik zegge, anders had ik het nooit gesnapt :P
ElBaknifico Geplaatst op 25-05-2005 om 22:47
Avatar van ElBaknifico

Moderator		 kerstmis dan? :-)
Mirax Geplaatst op 25-05-2005 om 16:27
 

Moderator		 Ik wilde eerst pasen nemen, maarja, dat valt ieder jaar op een andere dag, dus dat is ook weer zo vervelend. :)
ElBaknifico Geplaatst op 25-05-2005 om 16:25
Avatar van ElBaknifico

Moderator		 de maanden beginnen iig wel van 0 te tellen
Quote:

getMonth()
- Geeft de maand van het jaar (0-11)


en in nederland vieren ze sinterklaas de 5e 's avonds, terwijl het in belgië de 6e 's morgens gebeurt.

Bron: http://nl.wikipedia.org/wiki/Sinterklaas :-D
Eldarion Geplaatst op 25-05-2005 om 15:37
 

Regular		 ik dacht dat sinterklaas op 6 december was?
maar misschien is dat in nederland anders ...
in ieder geval: december is de 12de maand dacht ik (of begin je van 0 te tellen?)

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be