Obtenez la date du jour en HTML

HTML ne dispose pas d’un affichage intégré de la date en temps réel. Utilisez JavaScript pour créer un objet Date, formater sa valeur pour vos lecteurs, puis placer le texte obtenu dans un élément HTML. Un objet Date représente un instant ; des méthodes comme getMonth() et toLocaleDateString() déterminent la façon de présenter cette valeur.

Afficher la date et l’heure actuelles avec JavaScript dans HTML

Utilisez new Date() lorsque vous avez besoin d’un objet Date et de ses méthodes. Appeler Date() sans new renvoie immédiatement une chaîne de date et d’heure : cette valeur ne permet donc pas d’utiliser des méthodes telles que getFullYear(). Ajoutez à la page un élément portant l’identifiant current-date, sélectionnez ce même identifiant, puis définissez son textContent :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

Comme le script vient après l’élément, celui-ci existe lorsque getElementById() s’exécute. La valeur affichée dépend du moment où le script s’exécute et du fuseau horaire local de la machine. Utilisez textContent pour afficher du texte de date brut : la valeur ne sera ainsi pas interprétée comme du balisage HTML. Cet exemple de page dans le navigateur n’est pas exécuté par le runtime de l’article.

Pour une introduction plus générale à l’obtention de la date actuelle, consultez Obtenir la date actuelle en JavaScript.

Formater la date au format mois/jour/année en HTML

Pour afficher une date numérique au format américain, composez une chaîne à partir des différentes parties de la date. getMonth() renvoie un index commençant à zéro : ajoutez donc 1 pour obtenir le numéro de mois habituel. getDate() renvoie le jour du mois et getFullYear() l’année. Cet exemple utilise une date fixe pour que la logique de formatage soit facile à adapter ; remplacez-la par new Date() pour obtenir la date locale du jour.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

L’argument du mois dans le constructeur commence lui aussi à zéro : 0 correspond à janvier. Le remplissage avec des zéros permet d’afficher les mois et les jours à un chiffre sur deux positions. L’ordre month/day/year est une convention d’affichage, et non un format universel ; choisissez un autre ordre s’il convient mieux à votre public. Pour découvrir d’autres formats, consultez Formater une date en JavaScript.

Formater la date selon une locale avec toLocaleDateString()

Utilisez toLocaleDateString() pour demander aux fonctionnalités d’internationalisation du navigateur de produire une chaîne représentant une date. Indiquez une locale telle que en-US ou en-GB pour demander explicitement une convention, et transmettez des options pour contrôler les éléments affichés. Sans locale, le résultat peut dépendre de l’environnement du navigateur et varier d’un lecteur à l’autre.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

Remplacez la locale par en-GB pour demander les conventions de l’anglais britannique. Le runtime choisit le libellé exact et la ponctuation à partir de ses données de locale ; évitez de traiter la chaîne obtenue comme si sa structure était fixe. Utilisez toLocaleDateString() pour présenter une date aux lecteurs selon une langue et des conventions régionales, plutôt que pour produire une date lisible par machine.

Ajouter le jour de la semaine ou afficher une date plus lisible

Vous pouvez inclure directement le jour de la semaine grâce au formatage selon une locale. Cela évite de gérer séparément un tableau de noms de jours et laisse la locale choisie déterminer le libellé et l’ordre d’affichage.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

Vous pouvez combiner les mêmes options avec une autre locale, comme fr-FR, pour obtenir une date longue localisée. Si vous avez seulement besoin d’une valeur numérique courte, omettez weekday et utilisez des options numériques pour le mois et le jour. Le texte formaté peut varier d’un navigateur à l’autre à mesure que les données de locale évoluent, même lorsque la locale et les options demandées sont identiques.

Utiliser Moment.js pour d’autres formats de date et d’heure

Moment.js est une bibliothèque facultative ; elle n’est pas nécessaire pour afficher une date simplement. Chargez Moment.js avant d’appeler son API et incluez les données de locale correspondantes pour utiliser des formats localisés. Les appels suivants sont donnés à titre d’illustration et nécessitent cette dépendance dans la page : moment().format("YYYY-MM-DD") formate une date calendaire ; moment().fromNow() indique un temps relatif à l’instant présent ; moment.locale("fr"); moment().format("LL") demande un format français de date longue lorsque les données de locale française sont chargées ; et moment().calendar() choisit une formulation en fonction de la proximité de la date avec le moment présent.

Le temps relatif décrit un intervalle, et non la date de publication ou de mise à jour d’une page. N’étiquetez pas moment().fromNow() comme « Dernière mise à jour » si la valeur ne repose pas sur un véritable horodatage de mise à jour enregistré. Moment.js peut être utile dans les projets existants qui l’incluent déjà ; les API intégrées de Date évitent d’ajouter une dépendance pour les affichages simples.

Convertir une date en UTC avec toUTCString()

Utilisez toUTCString() lorsqu’une référence horaire commune est plus utile que l’heure locale du lecteur. Cette méthode renvoie une représentation textuelle de la valeur Date en UTC ; elle ne modifie pas l’instant sous-jacent et ne le convertit pas en heure locale du lecteur.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

Pour obtenir une valeur dynamique, remplacez l’horodatage ISO fixe par new Date(). Une date en UTC peut tomber un jour calendaire différent de celui du même instant dans un fuseau horaire local. Choisissez le format local pour une date destinée au lecteur, le format selon une locale pour respecter les conventions régionales, et l’UTC lorsque les personnes doivent comparer ou partager une référence horaire cohérente. Consultez Convertir une date en UTC avec JavaScript pour en savoir plus sur l’UTC.