> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> Javascript

> Tout sur le Javascript !

> Visite guidée des objets JS

> L'objet "Date"

> Lecture du tutoriel

L'objet "Date"

Par

JoSé2

Mise à jour : 22/07/2009

5 116 visites depuis 7 jours, dont 60 sur ce chapitre classé 38/786

L'objet Date va, comme son nom l'indique, nous permettre d'avoir accès à la date, mais également à l'heure.
Il peut servir à l'afficher dans un coin de la page (et non pas une énorme horloge horrible qui suit la souris :colere2:

), mais aussi à chronométrer le temps de visite d'une page ou bien le temps d'exécution d'un script JS.

Pour récupérer l'heure et la date actuelle, rien de compliqué : il suffit de créer une instance de cet objet, elle sera initialisée avec l'heure courante (qui est l'heure du PC du visiteur).
Code : JavaScript

1	var date = new Date();

Maintenant qu'on a notre objet, on peut lire chaque propriété (l'heure, l'année, ...) via les fonctions présentées plus bas.

Il est aussi possible d'initialiser l'objet à une autre date, qu'on indiquera sous forme de paramètres, comme ceci...
Code : JavaScript

1	var uneDate = new Date(annee, mois, jour, heure, minute, seconde);

Si les derniers paramètres ne sont pas précisés, ils sont mis à 0 :
Code : JavaScript

1	var uneAutreDate = new Date(annee, mois, jour);

Il est également possible de l'initialiser en donnant le nombre de millisecondes depuis le 01/01/1970, 0h00 :
Code : JavaScript

1	var derniereDate = new Date(millisecondes);

Passons maintenant aux méthodes, pour savoir que faire de notre nouvel objet.

Retour en haut

Sommaire du chapitre :

Sommaire
Méthodes diverses
Récupérer et modifier l'heure

Retour en haut

Sommaire

Méthodes diverses

getTime() : retourne le nombre de millisecondes écoulées depuis le 01/01/1970
setTime(x) : modifie la date en précisant le nombre x de millisecondes écoulées depuis le 01/01/1970
getTimezoneOffset() : retourne, en minutes, le décalage horaire avec le méridien de Greenwich.

Récupérer et modifier l'heure

getPropriété() pour lire la propriété
setPropriété(x) pour modifier la propriété
getUTCPropriété() pour lire la propriété (au méridien de Greenwitch)
setUTCPropriété(x) pour modifier la propriété (au méridien de Greenwich).

Les propriétés sont...

FullYear : l'année (à 4 chiffres)
Month : le mois
Date : le jour du mois
Day : le jour de la semaine.
Il vaut 0 pour dimanche ; 1 pour lundi [...] ; 6 pour samedi.
Hours : l'heure (de 0 à 23)
Minutes : les minutes
Seconds : les secondes
Milliseconds : les millisecondes .

Retour en haut

Méthodes diverses

getTime()

Description

Cette méthode renvoie le nombre de millisecondes écoulées entre le 01/01/1970 et la date.
Utile pour chronométrer un script, par exemple.

Exemple

Justement, chronométrons un petit script...
Code : JavaScript

var debut = new Date();
 
// le script ici
var i=0
while(i < 1234567)
     i++;
// fin du script
 
var fin = new Date();
tempsMs = fin.getTime() - debut.getTime();
alert("Le script a mis " + tempsMs/1000 + " secondes.");

Les new Date() servent à récupérer la date et l'heure à laquelle ils sont appelés. On en place donc un au début et un à la fin du script, et on fait la différence des getTime().

setTime(x)

Description

Modifie la date, en indiquant le nombre de millisecondes écoulées entre le 01/01/1970 et la date.
C'est un très bon format pour stocker une date (dans un cookie, par exemple) : on enregistre uniquement le nombre de millisecondes (cf. getTime()), qui permettra ensuite de retrouver la date ; quand besoin est, on demande à JS de re-créer notre date à partir de ce nombre.

Exemple

Code : JavaScript

1 2	var uneDate = new Date(); uneDate.setTime(1234567890);

On peut ensuite récupérer le jour, l'heure, etc. avec les méthodes présentées ci-après.

getTimezoneOffset()

Description

Retourne le décalage horaire, en minutes.

Exemple

Code : JavaScript

var date = new Date();
var decalage = date.getTimezoneOffset();
if(decalage > 0)
     alert("Vous avez " + decalage + " minutes d'avance sur les gens de Greenwich.");

Retour en haut

Récupérer et modifier l'heure

On va enfin lire l'heure !

Il est possible de reconstituer l'heure grâce aux méthodes qui nous permettent d'accéder au nombre de minutes, de secondes, etc.
Comme il n'y a pas grand chose à dire de ces fonctions, nous vous proposons une fonction qui affiche l'heure.

Quelques petites remarques cependant...

Noms des jours et des mois

Comme il a été dit, les jours de la semaine et les mois sont retournés sous forme de nombres.

Mais si on veut leur nom, comment faire ?

Pour cela, il est judicieux d'utiliser un tableau, ce qui est d'autant plus simple que les nombres commencent justement à 0.

On aura donc :
Code : JavaScript

1
2

var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
var mois = new Array("janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "decembre");

Attention aux minutes !

Un autre point "sensible" : lorsque les minutes sont inférieures à 10. En effet, afficher 1h1 n'est vraiment pas élégant...
Ceci est aussi valable pour les jours et les mois : on n'affiche pas 1/1/1970.
Il faudra donc penser à rajouter un zéro devant (sous forme de chaîne de caractères).

Créons notre fonction

On va maintenant créer deux fonctions supplémentaires retournant la date pour l'une et l'heure pour l'autre, en francais.

Pour la date, on va renvoyer une chaîne de caractères de la forme "mardi 5 avril 1988".
Code : JavaScript

function dateFr()
{
     // les noms de jours / mois
     var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
     var mois = new Array("janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "decembre");
     // on recupere la date
     var date = new Date();
     // on construit le message
     var message = jours[date.getDay()] + " ";   // nom du jour
     message += date.getDate() + " ";   // numero du jour
     message += mois[date.getMonth()] + " ";   // mois
     message += date.getFullYear();
     return message;
}

Pour l'heure, on se contentera d'un "1h01".
Code : JavaScript

function heure()
{
     var date = new Date();
     var heure = date.getHours();
     var minutes = date.getMinutes();
     if(minutes < 10)
          minutes = "0" + minutes;
     return heure + "h" + minutes;
}

Maintenant, il ne vous reste plus qu'à créer un petit champ de formulaire pour afficher l'heure.

Pour qu'elle soit actualisée automatiquement, il faut utiliser setInterval(fonction, delai) qui appellera fonction toutes les delai millisecondes.
C'est une méthode de l'objet window, elle sera abordée dans le chapitre sur ce dernier.

Retour en haut

Et un objet de plus, un !