Tutoriels Trucsweb
          

 

Niveau : INTERMÉDIAIRE
Compatibilité : Tous les navigateurs

  Ajouter aux favoris  Envoyer à un ami  Version imprimable

Manipulation des dates/heures en Javascript

Expliqué en détail et avec plusieurs scripts très pratiques.

   par Django (Oznog) Blais, Trucsweb (2 Février 2001)


Manipuler les dates et le temps est très utile. Récupérer la date locale d’un visiteur, convertir une date en temps GMT, extraire les minutes ou les jours à des fins de calcul ou utiliser un délai pour exécuter des fonction récursive, et autres manipulations.

L'objet Date
L'objet " date " du Javascript permet d'accéder et de manipuler le format date et heure. Les méthodes sont très semblables au Java, enregistre en milliseconde depuis le 1er Janvier 1970 00 :00 :00, elles ne seront plus valides vers 2032 si je me rappelle bien, et ce en raison du nombre limité d'octets !!. Enfin, d'ici là, amusons-nous un peu. Explications, exemple et une librairie de fonctions utiles.

Pour manipuler une date ou obtenir la date du jour vous devez créer un objet date. Il y a quatre façons de faire.

  • NomObjet = new Date()
  • NomObjet = new Date(" mois Jour, année heures:minutes:secondes ")
  • NomObjet = new Date(année, mois, jour)
  • NomObjet = new Date(année, mois, jour, heures, minutes, secondes)
  • La première syntaxe permet d'obtenir la date du jour dans le format (MM/JJ/AA)
  • La deuxième permet de forcer une date avec l'heure. chaîne de car. (strnig)
  • Les troisième et quatrième syntaxes en format (integer).
  • En n'initialisant pas l'heure (heure, minutes, secondes), leur valeur sera à zéro.

Exemples

Aujourdhui = new Date()
Noel = new Date("February 5, 2001 18:15:00")
Noel = new Date(97, 12, 25)
Noel = new Date(97, 12, 25, 1, 0, 0)

 

Les Méthodes
Une fois votre objet crée ou la date du jour obtenu, vous pouvez utiliser les méthodes suivantes pour manipuler votre objet.

Exemples

NomObjet.NomMethode(paramètres).


getDate()
Retourne le jour du mois pour une date spécifique.		 setDate()
Change la date d'un mois. Entre 1 et 31
getDay()
Retourne le jour de la semaine pour une date spécifique. Zéro pour dimanche, 1 pour lundi et ainsi de suite. 		setHours()
Change l'heure d'une date spécifique. Entre 0 et 23.
getHours()
Retourne l'heure d'une date spécifique. Entre 0 et 23. 		setMinutes()
Change les minutes d'une date spécifique. Entre 0 et 59.
getMinutes()
Retourne les minute d'une date spécifique. Nombre entre 0 et 59. 		setMonth()
Change le mois d'une date spécifique. Entre 0 et 11.
getMonth()
Retourne le mois d'une date spécifique. Nombre entre 0 et 11. 		setSeconds()
Change les secondes d'une date spécifique. Entre 0 et 59.
getSeconds()
Retourne les secondes d'une date spécifique. Nombre entre 0 et 59. 		setTime()
Change la valeur de l'objet Date.
getTime()
Retourne le nombre de milisecondes depuis le 1er janvier 1970. 		setYear()
Change l'année d'une date spécifique. Entre 0 et 23.
getUTCHours
Retourne l'heure selon la norme "Greenwich Mean Time GMT" en minute. 		 
getYear
Retourne l'année d'une date spécifique. À partir de 1900. 		setTimeout() et clearTimeout()
Évalue une expression après un certain délais en milisecondes.


FONCTION : getDate() TOP 

Retourne le jour du mois pour une date spécifique. Nombre entre 1 et 31

Syntaxe : NomObjet.getDate()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 18:15:00");

  jour = maDate.getDate();



  // Alerte pour afficher le résultat

  // "\n" permet de changer de ligne

  alert("maDate = "+maDate+"\ngetDate = "+jour)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getDate = 5

FONCTION : getDay() TOP 

Retourne le jour de la semaine pour une date spécifique. Nombre entre 0 et 6.

Syntaxe : NomObjet.getDay()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 23:15:00");

  nJour = maDate.getDay();



  alert("maDate = "+maDate+"\ngetDay = "+nJour)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getDay = 1



0 = Dimanche

1 = Lundi

2 = Mardi

3 = Mercredi

4 = Jeudi

5 = Vendredi

6 = Samedi

FONCTION : getHours() TOP 

Retourne l'heure d'une date spécifique. Nombre entre 0 et 23.

Syntaxe : NomObjet.getHours()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 23:15:00");

  nHeure = maDate.getHours();



  alert("maDate = "+maDate+"\ngetHours = "+nHeure)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getHours = 23

FONCTION : getMinutes() TOP 

Retourne les minute d'une date spécifique. Nombre entre 0 et 59.

Syntaxe : NomObjet.getMinutes()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 23:15:00");

  nMinutes = maDate.getMinutes();



  alert("maDate = "+maDate+"\ngetMinutes = "+nMinutes)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getMinutes = 15

FONCTION : getMonth() TOP 

Retourne le mois d'une date spécifique. Nombre entre 0 et 11.

Syntaxe : NomObjet.getMonth()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 23:15:00");

  nMois = maDate.getMois();



  alert("maDate = "+maDate+"\ngetMonth = "+nMois)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getMonth = 1



0 = Janvier

1 = Février

2 = Mars

3 = Avril

4 = Mai

5 = Juin

6 = Juillet

7 = Août

8 = Septembre

9 = Octobre

10 = Novembre

11 = Décembre

FONCTION : getSeconds() TOP 

Retourne les secondes d'une date spécifique. Nombre entre 0 et 59.

Syntaxe : NomObjet.getSeconds()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 23:15:00");

  nSec = maDate.getSeconds();



  alert("maDate = "+maDate+"\ngetSeconds = "+nSec)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getSeconds = 0

FONCTION : getTime() TOP 

Retourne le nombre de milisecondes depuis le 1er janvier 1970.

Syntaxe : NomObjet.getTime()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 23:15:00");

  nTemps = maDate.getTime();



  alert("maDate = "+maDate+"\ngetTime = "+nTemps)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  getTime = 981432900000

FONCTION : getUTCHours() TOP 

Retourne l'heure selon la norme "Greenwich Mean Time GMT" en minute.

Syntaxe : NomObjet.getUTCHours()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate = new Date("February 5, 2001 21:15:00");

  nGMT1 = maDate.getUTCHours();



  // Soustraire 5 pour obtenir le fuseau horraire de Montréal

  nGMT2 = nGMT1 - 5; 

  if ( nGMT2 < 0 ) {

    nGMT2 = 24 + nGMT2;

  }

  if (nGMT2 > 23) {

    nGMT2 = nGMT2 - 24;

  }



  alert("maDate = "+maDate+"\ngetUTCHours = "

          +nGMT1+"\nHeure Local = "+nGMT2)

</script>



Résultat

  maDate = Mon Feb 5 21:15:00 EST 2001

  getUTCHours = 2

  Heure locale =  21



Conversion entre principaux fuseaux horraire

+1 = Europe centrale

+2 = Istanbul

+3 = Moscou

+8 = Hong Kong

+9 = Tokyo

+10 = Townsville, Australia

-5 = New York (EST, Est stanrd time)

-6 = Chicago (CST, Continental stanrd time)

-7 = Denver (MST, Medle stanrd time)

-8 = Los Angeles (PST, Pacific stanrd time)

FONCTION : getYear() TOP 

Retourne l'année d'une date spécifique. À partir de 1900. En bas de 2000, l'année ne retourne que deux caractères Ex: 1995 = 95

Syntaxe : NomObjet.getYear()

Paramètres : aucun

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date();

  maDate2 = new Date("February 5, 1995 23:15:00");

  maDate3 = new Date("February 5, 2001 23:15:00");

  nAnnee1 = maDate1.getYear();

  nAnnee2 = maDate2.getYear();

  nAnnee3 = maDate3.getYear();



  alert("maDate1 = "+maDate1+"\ngetYear = "+nAnnee1

          +"\nmaDate2 = "+maDate2+"\ngetYear = "+nAnnee2

          +"\nmaDate3 = "+maDate3+"\ngetYear = "+nAnnee3)

</script>



Résultat

  maDate1 = "Votre date local"

  getYear = 2001

  maDate1 = Sun Feb 5 23:15:00 EST 1995

  getYear = 95

  maDate1 = Mon Feb 5 23:15:00 EST 2001

  getYear = 2001

FONCTION : setDate() TOP 

Change la date d'un mois.

Syntaxe : NomObjet.setDate(valeurJour)

Paramètres : valeurJour = un nombre entre 1 et 31

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date("February 2, 2001 18:15:00");

  maDate2 = new Date("February 2, 2001 18:15:00");

  maDate2.setDate(5);



  alert("maDate = "+maDate1+"\nsetDate = "+maDate2)

</script>



Résultat

  maDate = Fri Feb 2 18:15:00 EST 2001

  setDate = Mon Feb 5 18:15:00 EST 2001

FONCTION : setHours() TOP 

Change l'heure d'une date spécifique.

Syntaxe : NomObjet.setHours(valeurHeure)

Paramètres : valeurHeure = un nombre entre 0 et 23

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date("February 2, 2001 18:15:00");

  maDate2 = new Date("February 2, 2001 18:15:00");

  maDate2.setHours(23);



  alert("maDate = "+maDate1+"\nsetHours = "+maDate2)

</script>



Résultat

  maDate = Fri Feb 2 18:15:00 EST 2001

  setHours = Fri Feb 2 23:15:00 EST 2001

FONCTION : setMinutes() TOP 

Change les minute d'une date spécifique.

Syntaxe : NomObjet.setMinutes(valeurMinutes)

Paramètres : valeurMinutes = un nombre entre 0 et 59

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date("February 2, 2001 18:15:00");

  maDate2 = new Date("February 2, 2001 18:15:00");

  maDate2.setMinutes(20);



  alert("maDate = "+maDate1+"\nsetMinutes = "+maDate2)

</script>



Résultat

  maDate = Fri Feb 2 18:15:00 EST 2001

  setMinutes = Fri Feb 2 18:20:00 EST 2001

FONCTION : setMonth() TOP 

Change le mois d'une date spécifique.

Syntaxe : NomObjet.setMonth(valeurMois)

Paramètres : valeurMois = un nombre entre 0 et 11

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date("February 2, 2001 18:15:00");

  maDate2 = new Date("February 2, 2001 18:15:00");

  maDate2.setMonth(5);



  alert("maDate = "+maDate1+"\nsetMonth = "+maDate2)

</script>



Résultat

  maDate = Fri Feb 2 18:15:00 EST 2001

  setMonth = Sat Jun 2 18:15:00 EST 2001

FONCTION : setSeconds() TOP 

Change les secondes d'une date spécifique. Entre 0 et 59.

Syntaxe : NomObjet.setSeconds(valeurSecondes)

Paramètres : valeurSecondes = un nombre entre o et 59

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date("February 2, 2001 18:15:00");

  maDate2 = new Date("February 2, 2001 18:15:00");

  maDate2.setSeconds(30);



  alert("maDate = "+maDate1+"\nsetSeconds = "+maDate2)

</script>



Résultat

  maDate = Fri Feb 2 18:15:00 EST 2001

  setSeconds = Fri Feb 2 18:15:30 EST 2001

FONCTION : setTime() TOP 

Change la valeur de l'objet Date.

Syntaxe : NomObjet.setTime(valeurMSec)

Paramètres : valeurMSec = le nombre de milliseconde depuis le 1er janvier 1970 00:00:00.

 

<script type="text/javascript" language="javascript">

  // Exemple qui passe la date de maDate1 à maDate2

  // en passant les millisecondes d'une date à l'autre

  maDate1 = new Date("February 5, 2001 23:15:00")

  maDate2 = new Date()

  maDate2.setTime(maDate1.getTime());



  alert("maDate = "+maDate1+"\nsetTime = "+maDate2)

</script>



Résultat

  maDate = Mon Feb 5 23:15:00 EST 2001

  setTime = Mon Feb 5 23:15:00 EST 2001

FONCTION : setTimeout() TOP 

Évalue une expression après un certain délais en milisecondes.

Syntaxe : DelaisID = setTimeout(expression, msec)

Syntaxe : clearTimeout(DelaisID)

Paramètres :

- DelaisID = Identifiant pour annuler le délais à l'aide de "clearTimeout"

- expression = fonction ou propriété d'un objet.

- msec = nombre ou propriété d'un objet en milisecondes.

 
<!-- Exemple qui affiche l'heure dans

un champ texte d'un formulaire

et en format texte avec la balise SPAN -->





<head>



<script type="text/javascript" language="javascript">

<!--

var timerID = null;

var ok = false;



function arreter() {

  // s'assure que l'heure est arrêté

  if(ok)

    // Arrêt du délais

    clearTimeout(timerID)

  ok = false

}



function debut() {

  // Part l'affichage de l'heure

  arreter()

  aff_heure()

}



function aff_heure() {

  // Fonction pour afficher l'heure

  // Construction de l'heure

  var heure = new Date();

  var hh = heure.getHours();

  var mm = heure.getMinutes();

  var ss = heure.getSeconds();

  var valeur = "" + ((hh > 12) ? hh - 12 : hh);

  valeur += ((mm < 10) ? ":0" : ":") + mm;

  valeur += ((ss < 10) ? ":0" : ":") + ss;

  valeur += (hh >= 12) ? " P.M." : " A.M.";



  // Affiche l'heure dans le formulaire

  document.form.resul.value = valeur;



  // Affiche l'heure en format texte (pas compatible N6)

  if (document.layers) {

    document.layers.Htxt.document.write(valeur);

    document.layers.Htxt.document.close();

  }

  else if (document.all) {

    Htxt.innerHTML = valeur;

  }



  // Appelle de façon récursive la fonction

  // aff_heure() à chaque seconde.

  timerID = setTimeout("aff_heure()",1000);



  // Indique que l'heurre fonctionne

  ok = true;

}

// -->

</script>

</head>



<!-- Événement "onload" pour partir l'affichage

<body onLoad="debut()">



<!-- Affichage dans le formulaire -->

<form name="form">

  <input type="text" name="resul" size="12" value="">

</form>



<br>



<!-- Affichage en format texte -->

<span id=Htxt style="position:relative;"></span>



</body>



Résultat

  L'heure du formulaire  (HH:MM:SS A.M./P.M")

  L'heure en format texte (HH:MM:SS A.M./P.M")

FONCTION : setYear() TOP 

Change l'année d'une date spécifique. Entre 0 et 23.

Syntaxe : NomObjet.setYear(valeurAnnee)

Paramètres : valeurAnnee = un nombre entre 1900 et (?) 2032.

 

<script type="text/javascript" language="javascript">

  maDate1 = new Date("February 2, 2001 18:15:00");

  maDate2 = new Date("February 2, 2001 18:15:00");

  maDate2.setYear(2002);



  alert("maDate = "+maDate1+"\nsetYear = "+maDate2)

</script>



Résultat

  maDate = Fri Feb 2 18:15:00 EST 2001

  setYear = Sat Feb 2 18:15:00 EST 2002
 Début de la page
TrucswebTrucsweb


Fil d'info Trucsweb


 
sp

 
sp
 S U I T E   D U   S U J E T 
sp
Qu'est-ce qui arrive à l'année : Et la patche pour le Javascript...

Afficher la date en plusieurs langues : Avec le prototype twDate()

Afficher l'heure en plusieurs langues : Avec le prototype twHeure()

Hébergement de qualité!

partenaire
Rechercher un tutoriel!
 
 
sp
 C O M M A N D I T E S 
sp






 
sp
 T U T O R I E L S 
sp
· ASP / VBscript
· C/C++
· CSS
· DHTML
· CGI / Perl
· HTML
· Java/JSP
· Javascript
· PHP
· SSI
· WAP/WML
· XML/XSL
· Infographie
· Flash et Shockwave
· Audiovisuel
· Images gratuites
· Hébergement
· Analyses de logiciels
· Internet et Protocoles
· Veille intégrée
· Référencement
· Sécurité
· Outils gratuits
 
sp
 F O R U M S 
sp
· Forum Javascript
· Forum HTML/CSS
· Forum ASP/VBScript
· Forum Flash
· Tous les forums
 
sp
 S E R V I C E S 
sp
Generateur Trucsweb
· Générateur
· Répertoire
· Logithèque
· Glossaire
· Forum
· Nouveautés Dev Zone
· Ajouter un site
· Ajouter un logiciel
· Ajouter un tutoriel
· Fil d'info sur votre site
· Tester votre site
 
sp
 A P P L I C A T I O N S 
sp
· twCompteur 1.0 Nouveau
· twCalende 1.0 Nouveau
· twLiMenu 1.0 Nouveau
· twValide 2.2 sp
· twAliste 1.0 sp
· twASPDate 2.0 sp
· twASPLivre 1.0 sp
 
sp
 R É F É R E N C E S 
sp
· W3C HTML 4.0
· W3C XHTML 1.0
· Web Design Group
· W3C SMIL 2.0
· W3C XML 1.0
· XML Cover Pages
· W3C CSS LEVEL 2
· Netscape Javascript 1.5
· Netscape Javascript 1.4
· Netscape Javascript 1.3
· Netscape DHTML
· Gecko DOM ref.
· IE DHTML
· VBScript Language Ref.
· JScript Language Ref.
· ASP Object Quick Ref.
· ADO API Reference
· Microsoft IIS5
· MSDN Library
· RFC Editor Site
· HTML 4.0 code de caractères
· Unicode fonts
· Manuel PHP
· Documentation Perl
· Perl 5 Reference Guide
· Flash actionscript FAST
· ActionScript dictionary
· MySQL Manual
· SQL Pro (F. Brouard)
· Java Language Spec.
· Java 2 SDK Doc. V1.3.1
· JavaServer Pages Ref.
· C/C++ Language Ref.
· Python Library Reference
· Les Navigateurs
· Terminologie d'Internet
· Traduction
· Traduction systran
· Traduction d'interface client
· Extensions de fichiers
· Virus Wildlist
· Virus Alerts
 
sp
 D O M A I N E S 
sp
iWeb

iWeb
 
sp
 C O P Y R I G H T  
sp

 

accueil | tutoriels | logithèque | répertoire | forum



© 1997-2006
Django (Oznog) Blais
Rivière-du-Loup, Québec
Ajouter à votre Sidebar  RSS 1.0
 
Conception Oznog co. Multimédia


Hit-Parade    Tout navigateurs   

135 visiteurs

webmaster@summummag.com - webmaster@summummag.com - webmaster@summummag.com webmaster@summummag.com - webmaster@summummag.com
casting@summummag.com webmaster@summummag.com john@fueldigitalmedia.com mlavoie@summummag.com tmmw@sympatico.ca marty@cmcmediasales.com pdemers@genexcommunications.com mleclerc@summummag.com creation@summummag.com aroy@summummag.com redaction@summummag.com