Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

Javascript

Manipulation des dates/heures en Javascript

RDFFav

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

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çais

  • · 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() });
Petit prototype 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
Date anglaise - n’appliquer aucune conversion dans le cas d’une date anglaise. Par défaut, le navigateur s’en sort très bien...
Prototype twDate()

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)

           Visites : 4360 - Pages vues : 16082
    X

    Trucsweb.com Connexion

    X

    Trucsweb.com Mot de passe perdu

    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