Mis à jour le 14/08/2017
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

L'objet "Date"

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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).

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

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 :

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 :

var derniereDate = new Date(millisecondes);

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

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 o_O .

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

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

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 :

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".

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".

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.

Et un objet de plus, un ! ;)

Exemple de certificat de réussite
Exemple de certificat de réussite