Trucsweb.com

Trucsweb.com

Javascript

Manipulation des dates/heures en Javascript

RDFFav

Afficher la date en plusieurs langues - Avec le prototype twDate() et support du bogue de l’an 2000!

Cette petite fonction affiche la date au complet avec le nom du jour et du mois comme ceci; Mardi, 18 septembre 2001 ou encore en anglais: Tuesday, September 18, 2001. Il suffit d’envoyer en paramètre à la fonction, la date de votre choix, la date du jour ou celle de la dernière modification de votre document par exemple.date nom complet jour annee prototype twDate année dernière modification date() lastModified afficher affichage françaisAfficher la date en plusieurs langues - Avec le prototype twDate() et support du bogue de l’an 2000!

  • · Niveau : DÉBUTANT
  • · Compatibilité : IE 3+ / NS 3+ / Opera 3+ / Mozilla

Mise à jour : La méthode toLocaleDateString() qui retourne la date selon les conventions de format locales depuis 1999 permet depuis (Chrome 24, Firefox 29, Edge et IE 11) la spécification du format de la date avec le paramètre locales et options. Les arguments locales et options permettent de personnaliser la date.

Le point très intéressant est qu’il est possible d’afficher la date non seulement de façon locale, mais en contrôlant entièrement l’affichage en spécifiant à la pièce la langue et le pays. Par exemple, sur mes sites je demande la langue de l’usager, peut importe où il se trouve ou le navigateur qu’il utilise, je peux lui afficher la date selon la langue qu’il a choisie.

var dAujourdhui = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.write(dAujourdhui.toLocaleDateString('fr-CA', options));

// Résultat :  ‎mardi ‎3‎ ‎mars‎ ‎2015

var options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
document.write(dAujourdhui.toLocaleDateString('fr-FR', options));

// ‎Résultat :  ‎mar.‎ ‎3‎ ‎mars‎ ‎2015 

La valeur par défaut de l’argument options est « undefined », c’est-à-dire que les propriétés weekday, year, month, day sont toutes de type « numérique ». Elles peuvent être soit « numeric », « short » ou « long ». Mais attention, year et day doivent toujours être numeric. L’argument Options permet aussi de spécifier l’affichage UTC :

var dAujourdhui = new Date();
options.timeZone = "UTC";
options.timeZoneName = "short";
document.write(dAujourdhui.toLocaleDateString("fr-CA", options));

// Résultat : mardi‎, ‎2015‎-‎03‎-‎03‎ ‎13‎:‎48‎:‎57‎ ‎GMT 
// L’option « long » afficher rien de moins que « ‎Heure de Greenwich »

Je ne sais pas si la minuscule en français est une directive de la convention mais c’est toute une affaire de lui rendre son titre messieurs! Il faut passer par un méandre bien francophone, encore une fois. En JavaScript, du genre sChaine.charAt(0).toUpperCase() + sChaine.slice(1); ou une expression régulière, plus tordu sChaine.replace(/\b\w/, function(l){ return l.toUpperCase() }). Quant au simple et pratique CSS .maClasse::first-letter {text-transform:capitalize;display:inline-block;} ne s’applique avec la méthode JavaScript document.write ou même en manipulant directement le DOM avec la méthode document.getElementById! Donc dans le français que je connais, en JavaScript, j’ai ajouté le code suivant :

sChaine.toLocaleDateString(_lang, options).replace(/\b\w/, function(l){ return l.toUpperCase() });

// Ajouter le g dans pour mettre en majuscule le première lettre de CHAQUE mot.
sChaine.toLocaleDateString(_lang, options).replace(/\b\w/g, function(l){ return l.toUpperCase() });
Petite fonction twDateLocale()
<p class="text-center">
  Date française : <span id="oDateFr"></span><br />
  Date québécoise : <span id="oDateQc"></span><br />
  Date canadienne : <span id="oDateCa"></span><br />
</p>

<script>
function twDateLocale(_id,_date,_lang,_long) {
  if(_long) {
    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  } else {
    var options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
  }
  document.getElementById(_id).innerHTML = _date.toLocaleDateString( _lang,options).replace(/\b\w/, function(l){ return l.toUpperCase() });
}
</script>
<script>
  twDateLocale("oDateFr",new Date(),"fr-FR");
  twDateLocale("oDateQc",new Date(),"fr-CA",1);
  twDateLocale("oDateCa",new Date(),"en-CA",1);
</script>


// Résultat
// Date française : ‎Mar.‎ ‎3‎ ‎mars‎ ‎2015
// Date québécoise : ‎Mardi ‎3‎ ‎mars‎ ‎2015
// Date canadienne : Tuesday‎, ‎March‎ ‎03‎, ‎2015

Et la virgule?!?

Comme on peut voir, il manque la virgule après le nom du jour! Encore un oubli pour la gestion de la langue française. S’en devient pathétique! Alors une autre fonction pour créer une véritable date en français :

<script>
function twFormatDateFR(dDateTemp,sCharsetTemp) {
  const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  // Conversion Javascript selon la langue
  const aChaineTemp = dDateTemp.toLocaleDateString('fr-CA', options).split(' ');
  // Ajout de la virgule
  const sChaineRetour = aChaineTemp[0]+', '+aChaineTemp[1]+' '+aChaineTemp[2]+' '+aChaineTemp[3];
  // Retourne une date avec une majuscule sur la première lettre du mois
  return sChaineRetour.charAt(0).toUpperCase() + sChaineRetour.slice(1);
}

console.log(twFormatDateFR(new Date()));
console.log(twFormatDateFR(new Date(2015,2,22)));
</script>

// Résultat « parfait »!
// Mardi, ‎3‎ ‎mars‎ ‎2015
// Mardi, ‎3‎ ‎mars‎ ‎2015
Date anglaise - n’appliquer aucune conversion dans le cas d’une date anglaise. Par défaut, le navigateur s’en sort très bien...
Vielle méthode avec la fonction twDate() et support du bogue de l’an 2000!!

Cette petite fonction affiche la date au complet avec le nom du jour et du mois comme ceci; "Mardi, 18 septembre 2001" ou encore en anglais: "Tuesday, September 18, 2001". Il suffit d’envoyer en paramètre à la fonction, la date de votre choix, la date du jour ou celle de la dernière modification de votre document par exemple. Compatible avec Netscape et son problème de l’an 2000.

Exemple en français

<html>
<head>
<title>Affiche la date</title>
<script type="text/javascript" language="javascript">
<!--
function fait_Array(n) {
  this.length = n;
  return this;
}

aMois = new fait_Array(12);
aMois[1] = "janvier";
aMois[2] = "février";
aMois[3] = "mars";
aMois[4] = "avril";
aMois[5] = "mai";
aMois[6] = "juin";
aMois[7] = "juillet";
aMois[8] = "août";
aMois[9] = "septembre";
aMois[10] = "octobre";
aMois[11] = "novembre";
aMois[12] = "décembre";

aJours = new fait_Array(7);
aJours[1] = "Dimanche";
aJours[2] = "Lundi";
aJours[3] = "Mardi";
aJours[4] = "Mercredi";
aJours[5] = "Jeudi";
aJours[6] = "Vendredi";
aJours[7] = "Samedi";

function date_long(nDate) {
  var nEr = nDate.getDate();
  if (nEr == 1) nEr += "er";
  var nJour = aJours[nDate.getDay() + 1];
  var nMois = aMois[nDate.getMonth() + 1];
  var nAnnee = nDate.getYear();
  if (nAnnee < 100) nAnnee += 2000;
  if (nAnnee > 100&&nAnnee < 2000) nAnnee += 1900;
  return nJour + ", " + nEr + " " + nMois + " " + nAnnee;
}

// -->
</script>
</head>

<body>
<script type="text/javascript" language="javascript">
<!--
  // Date du jour
  document.write(date_long(new Date()));
// -->
</script>
<br />
<script type="text/javascript" language="javascript">
<!--
  // Date de la dernière modification du document
  document.write(date_long(new Date(document.lastModified)));
// -->
</script>
</body>
</html>

 

Exemple en Anglais

<html>
<head>
<title>Affiche la date</title>
<script type="text/javascript" language="javascript">
<!--
function fait_Array(n) {
  this.length = n;
  return this;
}

aMois = new fait_Array(12);
aMois[1] = "January";
aMois[2] = "February";
aMois[3] = "March";
aMois[4] = "April";
aMois[5] = "May";
aMois[6] = "June";
aMois[7] = "July";
aMois[8] = "August";
aMois[9] = "September";
aMois[10] = "October";
aMois[11] = "November";
aMois[12] = "December";

aJours = new fait_Array(7);
aJours[1] = "Sunday";
aJours[2] = "Monday";
aJours[3] = "Tuesday";
aJours[4] = "Wednesday";
aJours[5] = "Thursday";
aJours[6] = "Friday";
aJours[7] = "Saturday";

function date_long(nDate) {
  var nJour = aJours[nDate.getDay() + 1];
  var nMois = aMois[nDate.getMonth() + 1];
  var nAnnee = nDate.getYear();
  if (nAnnee < 100) nAnnee += 2000;
  if (nAnnee > 100&&nAnnee < 2000) nAnnee += 1900;
  return nJour + ", " + nMois + " " + nDate.getDate() + ", " + nAnnee;
}

// -->
</script>
</head>

<body>
<script type="text/javascript" language="javascript">
<!--
  // Date du jour
  document.write(date_long(new Date()));
// -->
</script>
<br />
<script type="text/javascript" language="javascript">
<!--
  // Date de la dernière modification du document
  document.write(date_long(new Date(document.lastModified)));
// -->
</script>
</body>
</html>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Super, ça marche nickel. Merci
    64x64
    Louis
    Date (GMT) : 2016-07-01 7:56:38 (UTC +0000)

    • Bonjour! je vous remercie pour ce scripte qui fonctionne parfaitement bien, rien à dire, sauf que j'ai ajouté un css pour la couleur et la taille. Merci encore!
      64x64
      Moutoussamy
      Date (GMT) : 2020-01-17 15:25:57 (UTC +0000)
      Date local : Fri Jan 17 2020 11:30:12 GMT+0100 (heure normale d

      • C'est vrai. R.a.s. Merci beaucoup
        64x64
        Moutoussamy
        Date (GMT) : 2020-01-17 15:27:24 (UTC +0000)
        Date local : Fri Jan 17 2020 11:31:39 GMT+0100 (heure normale d

        Ajouter un commentaire
        Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
        Votre évaluation du tutoriel

               Visites : 17001 - Pages vues : 29164
        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

        .
        @