Tutoriaux : Javascript

Script Masters

Espace membre

Langages

Autres ressources

Ressources graphiques

Recherche

Kit graphique

Liens

Statistiques

Télécharger cet article au format PDF

Untitled Document

Formater une date en javascript

Tutorial écrit par : Daniel Fabien - Script Masters

Introduction

Dans ce tutorial, nous allons voir comment on peut écrire une date en français à partir de la date géré par le bios du client.

Lire la date actuelle

Pour cela on utilise la fonction javascript new Date()

Cette fonction donne la date stockée dans le bios de l'ordinateur à la lecture du script par le navigateur.

En la stockant dans une variable vous conservez la date, pour pouvoir l'utiliser tout au long du script.
On appelle cela Créer un objet Date

Script :

now = new Date() ;
document.write(now);

Sortie :

Cette date est bien sûr sans intérêt, Voyons à présent comment la formater pour la rendre plus lisible.

Formater cette date

Vous l'aurez compris, cette date reste sans intérêt si on ne la formate pas.
Pour cela il existe une série de Méthodes permettant de lire les valeurs des Objets Date.

Les voici récapitulées dans un tableau:

Méthodes :

getDate()	Lire le jour du mois
getMonth()	Lire le mois
getFullYear()	Lire l'année
getHours()	Lire les heures
getMinutes()	Lire les minutes
getSeconds()	Lire les secondes
getDay()	Numero du jour de la semaine
getMilliseconds()	Lire les millisecondes

Nous allons utiliser ces méthodes pour écrire une date au format européen (jj/mm/aaaa)

Script :

now = new Date();
jour = now.getDate();
mois = now.getMonth() + 1;
année = now.getFullYear();

document.write(jour+'/'+mois+'/'+année)

Sortie :

Ce format, bien que correct, peut encore être amélioré par une série de propriétés conditionnelles comme nous allons le voir dans le chapitre suivant.

Ecrire la date sous forme de texte

A- Récupérer le jour.

Pour cela, on extrait les trois premiers caractères de l'objet Date

On utilise la méthode substring() qui permet de sélectionner une chaîne dans une autre chaîne en fonction de deux valeurs d'indices que vous indiquez entre parenthèse.

Les indices représentent la position du pointeur dans la chaîne de caractère.

Voici plus clairement comment on les utilise:

Script :

alpha="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
lettres=alpha.substring(0,4);
document.write(lettres);

Sortie :

Vous l'aurez compris, grâce a cette méthode on sélectionne une partie d'une chaîne de caractère pour la stocker dans une variable.

Ce qui nous intéresse ici est de connaître le jour de la semaine.
Or celui-ci est stocké dans les trois premiers caractères de l'objet Date.

En utilisant la méthode ci-dessus, on peut extraire ces trois caractères:

Script :

now = new Date();
lettres = ("" + now.toGMTString() + "")
joursemaine = lettres.substring(0,3);
document.write(joursemaine);

Sortie :

Pour les curieux, la méthode toGMTString() permet de convertir en texte (chaîne de caractère) la valeur de l'objet Date.

B - Convertir les données.

Pour cela, on utilise la propriété conditionnelle if (En pratique, il est plus judicieux d'utiliser switch/case, cependant, cette instruction de contrôle n'est pas définit par l'ECMA. On ne l'utilisera pas ici) :

Script :

now = new Date();
jour = now.getDate();
mois = now.getMonth() + 1;
année = now.getFullYear();
lettres = ("" + now.toGMTString() + "")

//On recherche le jour de la semaine
joursemaine = lettres.substring(0,3);
if(joursemaine=="Mon"){
js="Lundi"}
if(joursemaine=="Tue"){
js="Mardi"}
if(joursemaine=="Wed"){
js="Mercredi"}
if(joursemaine=="Thu"){
js="Jeudi"}
if(joursemaine=="Fri"){
js="Vendredi"}
if(joursemaine=="Sat"){
js="Samedi"}
if(joursemaine=="Sun"){
js="Dimanche"}

//On recherche le mois
if(mois=="1"){
mois2="Janvier";}
if(mois=="2"){
mois2="Fevrier";}
if(mois=="3"){
mois2="Mars";}
if(mois=="4"){
mois2="Avril";}
if(mois=="5"){
mois2="Mai";}
if(mois=="6"){
mois2="Juin";}
if(mois=="7"){
mois2="Juillet";}
if(mois=="8"){
mois2="Aout";}
if(mois=="9"){
mois2="Septembre";}
if(mois=="10"){
mois2="Octobre";}
if(mois=="11"){
mois2="Novembre";}
if(mois=="12"){
mois2="Decembre";}
document.write('Nous sommes le '+ js +' '+ jour +' '+ mois2 +' '+année);

Sortie :

Conclusion

L'objet Date en javascript possède énormément de propriété vous permettant de manipuler aisément la date donnée par l'horloge temps réel de l'ordinateur. Attention de ne pas vous fiez à celle-ci pour des calculs importants, car rien ne vous prouve que l'ordinateur du client est réglé sur la bonne heure.

- Un problème? Posez vos questions sur le forum Javascript!
- Ce tutorial a été consulté 16177 fois

Script Masters © Ce texte est la propriété de son auteur.
Toute reproduction est interdite.

Votre nom de domaine est-il libre?