Trucsweb.com

Javascript

Manipulation des dates/heures en Javascript

RDFFav

Manipulation des dates/heures en Javascript - Expliqué en détail et avec plusieurs scripts très pratiques.

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.date heure minutes secondes délais timer getDate() setDate() getDay() etHours() getHours() setMinutes() getMinutes() setMonth() getMonth() setSeconds() getSeconds() setTime() getTime() setYear() getUTCHours getYear setTimeout() clearTimeout()

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : Tous les navigateurs

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
var dAujourdhui = new Date();
var dNoel = new Date("February 5, 2001 18:15:00");
var dNoel = new Date(97, 12, 25);
var dNoel = 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()

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

Syntaxe : NomObjet.getDate()

Paramètres : aucun

<script>
var maDate = new Date("February 5, 2001 18:15:00");
var 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()

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

Syntaxe : NomObjet.getDay()

Paramètres : aucun

<script>
var maDate = new Date("February 5, 2001 23:15:00");
var 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()

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

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

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

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

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

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

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

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

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

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

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

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

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

É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()

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
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Bonjour, Pouvez vous me dire comment opérer des opération sur les Dates ? Est-il possible de faire quelques chose comme nouvelleDate = maDate.addHour(3); ou quelque chose du genre ??? Merci
    64x64
    DUMONT Nicolas
    http://copocorp.free.fr
    2015-10-21 13:12:46
    • Salut, Il n'y a pas de .addHour comme les langages serveur PHP ou ASP. Mais ça se fait très bien avec « setHours » // Ajouter 3 heures à une date dDate.setHours(dDate.getHours()+3); <script> var dDate = new Date(); var dNeoDate = new Date(dDate); dNeoDate.setHours(dNeoDate.getHours()+3); alert(dDate.getHours()+\n+dNeoDate.getHours()); </script>
      64x64
      oznog
      http://www.trucsweb.com
      2015-10-21 13:16:22


    • Bonjour, Je souhaiterai récupérer le fuseau horaire afin de passer automatiquement en UTC en ajoutant ou soustrayant le décalage horaire à l'heure. Mais je ne sais pas comment récupérer ce décalage (ex. : GMT +2 pour la France en heure d'été).
      64x64
      Maxime

      2016-04-18 9:46:20
      • Salut, Ça n'existe pas, mais tu peux récupérer l'heure UTC et soustraire l'heure local tout simplement : dAujourdhui = new Date(); nHeureUTC = dAujourdhui.getUTCHours(); nHeureLocal = dAujourdhui.getHours(); alert("décalage : "+(nHeureUTC-nHeureLocal)); Sinon, il existe des solution serveur, notamment avec SQL Server. Tu peux lire ce tutoriel pour plus de détail : ASP : Temps Universel Coordonné (UTC) http://www.trucsweb.com/tutoriels/asp/asp-utc/ Ciao
        64x64
        oznog
        http://www.trucsweb.com
        2016-04-18 12:33:45
        • Super, merci.
          64x64
          Maxime

          2016-04-18 17:11:5



      • Bonjour, Je crée une date en splitant une chaine qui est du type "dd/MM/yyyy hh:mm:ss tt" Seulement quand j'affiche la date dans ma page ensuite je récupère une date du type "Sun Apr 17 17:00:00 UTC+0200 2016" Est-ce que tu sais comment je pourrais garder mon format initial ? Merci d'avance.
        64x64
        Jonathan

        2016-08-30 9:48:18
        • Salut, Une date est un format de données. Ce n'est pas une chaine de caractère. Comme un nombre, même si on peut l'écrire, même si on peut le « splitter », ça reste un nombre et le moteur JavaScript le traite comme un nombre. Une date c'est la même chose. On a beau la travailler, elle reste une date régie par le paramètre du navigateur, globale ou locale. C'est la même chose avec le format de date du serveur qui indique au navigateur le bon format. 1. Tu peux t'assurer qu'elle reste une chaine de caractère en la transférant dans une chaine de caractère ou en l'affichant directement lors de la construction. document.write(jour + ' ' + nomMois[mois] + ' ' + annee); 2. comme la plupart des développeurs, j'utilise ma propre librairie pour afficher les dates, particulièrement en français. Le JavaScript a déjà depuis la version 1 le prototype date.toLocaleString(). Par exemple new Date().toLocaleString('fr-CA'); Mais encore une fois, tout dépend du navigateur... 3. Avec le JavaScript 6 il y a un nouveau « DateTimeFormat » https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/format Exemple : var MaDateFrancaise = new Intl.DateTimeFormat("fr-FR") var MaDateQuebecoise = new Intl.DateTimeFormat("fr-CA") MaDateFrancaise.format(new Date("2016-08-30")) === "1/2/2015" MaDateQuebecoise.format(new Date("2016-08-30")) === "2.1.2015" Ça fait pas mal le tour. Sinon tu peux utiliser une librairie comme « dateFormat » de Steven Levithan. http://blog.stevenlevithan.com/archives/date-time-format Ciao
          64x64
          OZNOG
          http://www.trucsweb.com
          2016-08-30 11:50:6


               Visites : 32325 - Pages vues : 63289
        X

        Trucsweb.com Connexion

        Connexion

        X

        Trucsweb.com Mot de passe perdu

        Connexion

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte

        Créer un compte

        .
        @