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

</script>
</head>

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

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

</script>
</body>
</html>

Exemple en Anglais

<html>
<head>
<title>Affiche la date</title>
<script type="text/javascript" language="javascript">

</script>
</head>

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

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

</script>
</body>
</html>