Manipuler les dates en Javascript

Il est parfois nécessaire de manipuler les dates et les heures au sein d'une application Web. Par exemple, créer un calendrier pour pouvoir sélectionner la date de départ d'un train plus facilement, ou afficher l'horloge sur sa page Web, ou encore calculer la durée de séjour d'un client qui compte réserver une chambre d'hôtel sur un site d'hébergement.

Cependant, il ne faut pas trop se fier à la date du client, car celle-ci peut ne pas être précise. Mais, il est utile de savoir comment manipuler les dates en Javascript.

Objet Date

Pour créer un objet Date on fait comme ceci:
d est l'objet résultatnt de l'objet (prototype) Date() de Javascript. Le mot clé new signifie "nouvelle" date dans ce cas.

Si les parenthèses de Date() sont vides, cela signifie qu'on veut créer l'objet date à partir de la date courante du système. Par contre on peut toujours faire référence à une date différente en la précisant entre les parenthèses comme ceci:
Cela signifie que l'on veut créer l'objet date à partir de la date spécifiée en paramètre dans cet ordre: année, mois, jours, heures, minutes, seconds. La date spécifiée signifie le premier décembre 2015 à minuit. Et oui, Décembre et non pas novembre, car en Javascript Janvier est identifié par 0, février 1, etc...

Si nous essayons d'afficher l'objet d on aura quelque chose qui ressemble à ceci:

Tue Dec 01 2015 19:49:34 GMT+0000

C'est sûr, tout est là. Mais cette date est mal présentée. Il n'est donc pas très commode de la mettre ainsi sur une page Web. La solution consiste donc à extraire les données de la date une à une et décider après de la manière avec laquelle on veut les afficher. Pour ce faire, nous allons faire appel aux méthodes de l'objet Date.

Méthodes de l'objet Date

Plusieurs méthodes sont mises à notre dispositions. Mais, comme d’habitude nous allons voir les plus utiles:

• getYear(): permet de retourner l'année sur deux chiffres. Un préfixe numérique peut s'ajouter pour indiquer le siècle. Par exemple 15 désigne 1915 et 115 désigne 2015. Cependant, cette méthode est devenue obsolète et il est préférable d'utiliser getFullYear().
• getFullYear(): permet de retourner l'année sur 4 chiffres.
• getDate(): retourne la date du mois comprise entre 1 et 31.
• getDay(): retourne un indice numérique qui représente le jour de la semaine. 0 pour dimanche, 1 pour lundi, ... , 6 pour samedi.
• getMonth(): retourne un indice numérique qui représente le mois. 0 pour janvier, 1 pour février, ... , 11 pour décembre.
• getHours(): retourne l'heure (sans zéro initial). Si la date crée fait référence à 9h du matin, alors cette méthode retournera 9 et non pas 09.
• getMinutes(): retourne les minutes (sans zéro initial).
• getSeconds(): retourne les secondes (sans zéro initial).
• getMilliSeconds(): retourne les millisecondes (rarement utilisé).
• getTime(): retourne ce que l'on appelle le Timestamp UNIX (ou Timestamp POSIX) en millisecondes. C'est à dire le nombre de millisecondes écoulées depuis 01/01/1970 00:00:00. C'est la date où le premier système UNIX a été lancé.

Je crois que toutes les méthodes parlent d'elles même, sauf le dernier (getTime()). En effet, à quoi peut servir le fait de connaitre le nombre de millisecondes écoulées depuis 1970?

Imaginons que nous voulons créer un site Web de location de voitures. La page qui permet d'en louer une affiche un formulaire qui contient plusieurs champs, dont deux représentent respectivement la date où l'on souhaite récupérer la voiture, et la date où on compte la rendre. Ce qui permet de calculer la durée de la location. Cependant, les dates ne sont pas des nombres pour faire une simple soustraction. C'est là où intervient le Timestamp.

La méthode est simple. On soustrait le Timestamp de la deuxième date du Timestamp de la première. Le résultat représente le nombre de millisecondes écoulées depuis la première date jusqu'à la deuxième date. Il suffit de procéder à des conversions simples pour avoir le nombre de jours.

Exemples:

On veut afficher la date d'aujourd'hui sous la forme habituelle. Par exemple: Lundi 1 décembre 2015. Voilà ma version de code:

Si on tente d'afficher la variable (chaîne de caractères) aujourdhui on aura:
Maintenant on va voir comment calculer la différence de deux date.

Imaginons que nous voulons calculer le nombre de jours écoulée du 21 décembre 2014 au 15 janvier 2016. Le code peut être écrit comme ceci:
Si on affiche la variable diffEnJours on aura:
Le passage des millisecondes aux jours nécessite la division par 1000 puis 3600 puis 24 (1000 millisecondes par seconde, 3600 secondes par heure et 24 heures par jour).

Les dates et heures (objet Date) en vidéo