
FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 175, dernière mise à jour : 6 décembre 2013

- Comment afficher la date ou l'heure en temps réel ?
- Comment comparer deux dates ?
- Comment vérifier si un champ qui contient la date et l'heure au format (aaaa-mm-jj hh:mm:ss) est bien rempli ?
- Comment convertir une date JavaScript en français ?
- Comment déterminer si une année est bissextile ?
- Comment calculer le nombre de jours entre deux dates ?
- Comment déterminer la date d'il y a 6 mois ?
- Quelle est la différence entre setFullYear et setUTCFullYear ?
L'objet Date() contient 4 fonctions qui permettent d'afficher l'heure et le jour selon les cas. Les 4 fonctions qui affichent l'heure sont :
- toString() : date en anglais, heure (hh:mm:ss) et fuseau horaire ;
- toTimeString() : heure (hh:mm:ss) au format 24h si navigateur en français et fuseau horaire ;
- toLocaleString() : date dans la langue du système, heure (hh:mm:ss) au format 24h si navigateur en français ;
- toLocaleTimeString() : heure (hh:mm:ss) au format 24h si navigateur en français.
Exemple : afficher l'heure du système et la mettre à jour toutes les secondes.
function
horloge
(
)
{
var
tt =
new
Date
(
).
toLocaleTimeString
(
);
//
hh:mm:ss
document.
getElementById
(
"
timer
"
).
innerHTML =
tt;
setTimeout
(
horloge,
1000
);
//
mise
à
jour
du
contenu
"timer"
toutes
les
secondes
}
Et voici la zone d'affichage :
<
div
id
=
"
timer
"
>
<
/
div
>
La fonction est appelée, par exemple, de la manière suivante :
<
body
onload
=
"
horloge();
"
>
Voici une technique permettant de comparer deux dates :
//
Mise
en
place
de
la
première
date
var
d1 =
new
Date
(
2006
,
11
,
27
);
//
Mise
en
place
de
la
seconde
date
var
d2 =
new
Date
(
2006
,
0
,
18
);
if
(
d1 >
d2)
{
alert
(
"
d1
est
après
d2
"
);
}
else
if
(
d1 <
d2)
{
alert
(
"
d1
est
avant
d2
"
);
}
else
{
alert
(
"
d1
et
d2
sont
la
même
date
"
);
}
Nous pouvons pousser un peu plus la précision de la comparaison en ajoutant l'heure de la date :
var
d =
new
Date
(
year,
month,
day,
hours,
minutes,
seconds,
milliseconds);
Lien : Exemple d'utilisation de ce script
Lien : Pour en savoir plus sur les
arguments de l'objet Date()
objet Date()
//
date
au
format
dd-mm-yyyy
hh:mm:ss
(fr)
//
date
au
format
yyyy-mm-dd
hh:mm:ss
(en)
function
isGoodDate
(
mydate,
format)
{
var
thedate,
day,
month,
year;
var
onedate;
var
thetime,
hours,
minutes,
seconds;
var
onetime;
var
mysplit=
mydate.
split
(
'
'
);
if
(
mysplit.
length !
=
2
)
{
return
false
;
}
thedate=
mysplit[
0
]
.
split
(
'
-
'
);
if
(
format=
=
"
en
"
)
{
year =
parseInt
(
thedate[
0
]
,
10
);
month =
parseInt
(
thedate[
1
]
,
10
);
day =
parseInt
(
thedate[
2
]
,
10
);
if
(
(
mysplit[
0
]
.
length !
=
10
) |
|
(
thedate.
length !
=
3
) |
|
(
isNaN
(
year)) |
|
(
isNaN
(
month)) |
|
(
isNaN
(
day)) |
|
(
thedate[
0
]
.
length <
4
) |
|
(
thedate[
1
]
.
length <
2
) |
|
(
thedate[
2
]
.
length <
2
))
{
return
false
;
}
}
else
if
(
format=
=
"
fr
"
)
{
day =
parseInt
(
thedate[
0
]
,
10
);
month =
parseInt
(
thedate[
1
]
,
10
);
year =
parseInt
(
thedate[
2
]
,
10
);
if
(
(
mysplit[
0
]
.
length !
=
10
) |
|
(
thedate.
length !
=
3
) |
|
(
isNaN
(
year)) |
|
(
isNaN
(
month)) |
|
(
isNaN
(
day)) |
|
(
thedate[
0
]
.
length <
2
) |
|
(
thedate[
1
]
.
length <
2
) |
|
(
thedate[
2
]
.
length <
4
))
{
return
false
;
}
}
else
{
return
false
;
}
onedate =
new
Date
(
year,
month-
1
,
day);
year =
onedate.
getFullYear
(
);
if
(
(
onedate.
getDate
(
) !
=
day) |
|
(
onedate.
getMonth
(
) !
=
month-
1
) |
|
(
onedate.
getFullYear
(
) !
=
year ))
{
return
false
;
}
thetime =
mysplit[
1
]
.
split
(
'
:
'
);
hours =
parseInt
(
thetime[
0
]
,
10
);
minutes =
parseInt
(
thetime[
1
]
,
10
);
seconds =
parseInt
(
thetime[
2
]
,
10
);
if
(
(
mysplit[
1
]
.
length !
=
8
) |
|
(
thetime.
length !
=
3
)|
|
(
isNaN
(
hours)) |
|
(
isNaN
(
minutes)) |
|
(
isNaN
(
seconds)) |
|
(
thetime[
0
]
.
length <
2
) |
|
(
thetime[
1
]
.
length <
2
) |
|
(
thetime[
2
]
.
length <
2
))
{
return
false
;
}
onetime =
new
Date
(
year,
month-
1
,
day,
hours,
minutes,
seconds);
if
(
(
onetime.
getHours
(
) !
=
hours) |
|
(
onetime.
getMinutes
(
) !
=
minutes) |
|
(
onetime.
getSeconds
(
) !
=
seconds))
{
return
false
;
}
return
true
;
}
La fonction prend un paramètre supplémentaire qui s'appelle format. Sa valeur est soit "fr" soit "en".
isGoodDate("18-11-2012 11:36:00", "fr");
retournera true.
isGoodDate("18-11-2012 11:36:00", "en");
retournera false.
isGoodDate("2012-11-18 11:36:00", "fr");
retournera false.
isGoodDate("2012-11-18 11:36:00", "en");
retournera true.
Dans le cas où le second paramètre n'est ni "fr" ni "en" la fonction retournera false. Tout ceci sous réserve que la chaîne passée contienne effectivement une date et une heure valides.
Lien : D'autres fonctions possibles
Lorsque l'on veut afficher une date en JavaScript, on est souvent confronté aux problèmes d'internationalisation. En effet, un code du type alert(new Date()) affiche un résultat de ce genre :
Fri Oct 09 2009 00:00:00 GMT+0200
Il s'agit certes de la bonne date, mais malheureusement pas au format que l'on a envie d'afficher !
Pour convertir cette date en format français, il suffit tout simplement d'utiliser la méthode toLocaleString() de l'objet Date() :
var
ceJour =
new
Date
(
);
alert
(
ceJour.
toLocaleString
(
));
Attention, cette méthode dépend des paramètres linguistiques du système d'exploitation !
Il existe des tests connus pour savoir si une année est bissextile ou non. Le problème qui se pose souvent vient de la gestion des années multiples de 10. Pour gérer ces cas, on en arrive rapidement à des algorithmes compliqués.
Encore une fois, en utilisant l'objet Date de JavaScript, la solution devient très simple.
var
annee =
prompt
(
'
Année
?
'
)
alert
(
new
Date
(
annee,
2
,
0
).
getDate
(
));
Ce code prend en compte que lorsqu'on définit une date incohérente, JavaScript se débrouille pour l'ajuster en une date existante.
Dans cet exemple, le 0e jour de mars deviendra donc le dernier jour de février, ce qu'affiche la boîte alert.
Il devient donc facile d'augmenter les prototypes des objets Number et Date :
Number
.
prototype.
isBissextile=
function
(
){
return
(
new
Date
(
this
,
2
,
0
).
getDate
(
)>=
29
);
}
alert
(
(
2016
).
isBissextile
(
));
Date
.
prototype.
isBissextile=
function
(
){
return
(
new
Date
(
this
.
getFullYear
(
),
2
,
0
).
getDate
(
)>=
29
);
}
var
today =
new
Date
(
);
today.
setFullYear
(
2012
);
alert
(
today.
isBissextile
(
));
Si vous souhaitez calculer le nombre de jours séparant deux dates données, cette fonction fera votre bonheur :
function
diffdate
(
d1,
d2){
var
WNbJours =
d2.
getTime
(
) -
d1.
getTime
(
);
return
Math
.
ceil
(
WNbJours/
(
1000
*
60
*
60
*
24
));
}
Explication
:
d1
et
d2
étant deux dates, la méthode
getTime()
retourne le nombre de millisecondes écoulées depuis le 1er janvier 1970.
Il suffit donc de soustraire les deux valeurs et de convertir le nombre de millisecondes obtenues en jours (1000 => secondes, 60 => minutes, 60 => heures, 24 =>
jours).
Exemple d'utilisation de ce code :
var
Date1 =
new
Date
(
2010
,
0
,
1
);
var
Date2 =
new
Date
(
2011
,
0
,
1
);
alert
(
diffdate
(
Date1,
Date2) +
'
jours
'
);
Vous pouvez bien sûr enrichir cette fonction en spécifiant le l'unité de temps à renvoyer :
function
diffdate
(
d1,
d2,
u){
var
div=
1
;
switch
(
u){
case
'
s
'
:
div=
1000
;
break
;
case
'
m
'
:
div=
1000
*
60
;
break
;
case
'
h
'
:
div=
1000
*
60
*
60
;
break
;
case
'
d
'
:
div=
1000
*
60
*
60
*
24
;
break
;
}
var
Diff =
d2.
getTime
(
) -
d1.
getTime
(
);
return
Math
.
ceil
(
Diff/
div);
}
var
Date1 =
new
Date
(
2010
,
0
,
1
);
var
Date2 =
new
Date
(
2011
,
0
,
1
);
alert
(
diffdate
(
Date1,
Date2,
'
d
'
) +
'
jours\n
'
+
diffdate
(
Date1,
Date2,
'
h
'
)
+
'
heures\n
'
+
diffdate
(
Date1,
Date2,
'
m
'
)
+
'
minutes\n
'
+
diffdate
(
Date1,
Date2,
'
s
'
)
+
'
secondes\n
'
+
diffdate
(
Date1,
Date2,
'
'
)
+
'
millisecondes
'
);
Si vous avez besoin de récupérer la date d'il y a six mois, la solution simple qui vient en première intention est de retrancher les six mois à la date du jour :
var
last6 =
new
Date
(
);
last6.
setMonth
(
today.
getMonth
(
)-
6
);
Bien que satisfaisante dans la plupart des cas, cette solution ne l'est plus pour les derniers jours du mois.
En effet, si l'on prend par exemple le 31 août, le code précédent affectera à la variable la date du 31 février et comme cette date n'existe pas, elle sera
rectifiée par JavaScript en 2 ou 3 mars (selon que l'année est bissextile ou non), or, dans ce genre de cas, c'est bien le dernier jour de février que l'on
cherche.
Il va donc falloir utiliser l'astuce suivante :
- nous allons fixer la date au jour 0 du 5e mois précédent, ce qui aura pour effet d'ajuster la date au dernier jour du mois -6 ;
- affecter le jour à la plus petite valeur entre la date du jour et le dernier jour d'il y a six mois en utilisant l'objetMath().
var
today =
new
Date
(
);
var
last6 =
new
Date
(
today.
getFullYear
(
),
today.
getMonth
(
)-
5
,
0
);
last6.
setDate
(
Math
.
min
(
today.
getDate
(
),
last6.
getDate
(
)));
La méthode setFullYear() permet de positionner l'année de l'objet Date() sur 4 caractères.
var
d =
new
Date
(
);
d.
setFullYear
(
2013
);
En fait la méthode permet également de positionner le mois et le jour car sa signature complète est setFullYear(annee, mois, jour). Les deux derniers paramètres étant optionnels.
La méthode setUTCFullYear() permet elle aussi de positionner l'année de l'objet Date() sur 4 caractères mais selon l'heureUTC/GMT. Elle s'utilise de la même manière et accepte également le mois et le jour.
UTC : Universal Coordinated Time, est une échelle de temps adoptée par la plupart des pays comme étant la base du temps civil international.