Alain Barraud Mémento informatique  
 
Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives
Page ouverte le 11/06/2009

Retour accueil JS

JavaScript - L'objet "Date"

L'objet Date permet d'avoir accès à la date, mais également à l'heure.
Il peut servir à l'afficher dans un coin de la page, 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…
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 :
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 :
1     var derniereDate = new Date(millisecondes);

Passons maintenant aux méthodes, pour savoir que faire de notre nouvel objet.
Sommaire partie 14
1 Sommaire
2 Méthodes diverses
3 Récupérer et modifier l'heure
Haut de page

Sommaire

Méthodes diverses

  • getTime() : retourne le nombre de millisecondes écoulées depuis le 01/01/1970
  • setTime() : 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.

Méthodes diverses

  • getPropriété() pour lire la propriété
  • setPropriété(x) pour modifier la propriété
  • getUTFPropriété() pour lire la propriété (au méridien de Greenwitch)
  • setUTFProprié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
Haut de page

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

Chronométrons un petit script&hellip:
Code : JavaScript
1     var debut = new Date();
2
3     // le script ici
4     var i=0
5     while(i < 1234567)
6         i++;
7     // fin du script
8
9     var fin = new Date();
10     tempsMs = fin.getTime() - debut.getTime();
11     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     var uneDate = new Date();
2     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
1     var date = new Date();
2     var decalage = date.getTimezoneOffset();
3     if(decalage > 0)
4         alert("Vous avez " + decalage + " minutes d'avance sur les gens de Greenwich.");
Haut de page

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. On va ici utiliser l'évènement onChange, qui appellera la fonction quand l'utilisateur modifiera le choix.
question 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.

Code : JavaScript
1     var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
2     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 français.

Pour la date, on va renvoyer une chaîne de caractères de la forme "mardi 5 avril 1988".
Code : JavaScript
1     function dateFr()
2     {
3     // les noms de jours / mois
4         var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
5         var mois = new Array("janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "decembre");
6     // on recupere la date
7         var date = new Date();
8     // on construit le message
9         var message = jours[date.getDay()] + " "; // nom du jour
10         message += date.getDate() + " "; // numero du jour
11         message += mois[date.getMonth()] + " "; // mois
12         message += date.getFullYear();
13         return message;
14     }

Pour l'heure, on se contentera d'un "1h01".
Code : JavaScript
1     function heure()
2     {
3         var date = new Date();
4         var heure = date.getHours();
5         var minutes = date.getMinutes();
6         if(minutes < 10)
7             minutes = "0" + minutes;
8         return heure + "h" + minutes;
9     }

Il ne reste plus qu'à créer un petit champ de formulaire pour afficher l'heure.
alt 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.

Voir test 15 avec code function dans <head>

Voir http://creer-un-site.fr/fonction-date-en-javascript-15.php
http://fr.hscripts.com/tutoriels/javascript/index.php
Haut de page