HTMLInputElement : propriété valueAsDate

Valeur

Un objet Date ou null si la conversion est impossible. La date retournée doit toujours être interprétée comme une heure UTC — par exemple, en utilisant des méthodes comme getUTCDate() au lieu de getDate(). Si vous n'êtes pas prudent, le résultat peut être décalé d'un jour — par exemple, si l'utilisateur·ice se trouve dans un fuseau horaire UTC négatif (les États-Unis, par exemple), alors interpréter la date comme une date locale donnera le jour précédent par rapport à ce que l'utilisateur·ice a sélectionné.

Les entrées de type month, date et week retournent une date UTC qui représente le premier instant de la période de temps saisie — c'est-à-dire qu'elles sont toujours à minuit en UTC. Pour month, la date est le premier jour du mois. Pour week, la date est le lundi de la semaine. Le type d'entrée time a toujours la date définie sur 1970-01-01.

Le type d'entrée datetime-local ne prend pas en charge la propriété valueAsDate, car il représente une date et une heure dans le fuseau horaire local (une heure murale), mais les objets Date représentent un point absolu dans le temps. Cependant, certains navigateurs peuvent fournir une implémentation non standard. WHATWG travaille à l'intégration ^(angl.) de l'API Temporal avec les entrées de date et heure pour tenir compte de ce cas d'utilisation.

Exemples

Récupérer une valeur de date

Cet exemple montre l'utilisation de la propriété valueAsDate avec un <input> de type week.

HTML

Nous incluons un <input> de type week :

<label for="date">Choisissez une date et une heure&nbsp;:</label>

<input name="date" id="date" type="week" />

<pre id="log"></pre>

JavaScript

Si aucune date ni heure n'est sélectionnée, le champ de saisie vide est considéré comme null. À chaque sélection, un évènement change est déclenché, mettant à jour le contenu du <pre> qui affiche la HTMLInputElement.value du contrôle de formulaire comparée à cette valeur en tant que date.

const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Valeur initiale : ${inputElement.valueAsDate}`;

inputElement.addEventListener("change", () => {
  logElement.innerText = `${inputElement.value} se résout en ${inputElement.valueAsDate}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Résultats

Utiliser les méthodes de Date

Cet exemple montre l'application des méthodes Date directement à la propriété valueAsDate d'un <input> de type date.

HTML

Nous incluons un <input> de type date :

<label for="date2">Choisissez une date&nbsp;:</label>

<input name="date2" id="date2" type="date" />

<pre id="log"></pre>

JavaScript

Lorsqu'aucune date n'est sélectionnée, la chaîne de caractères vide est convertie en null. À chaque sélection, un évènement change est déclenché. Nous remplissons ensuite le journal avec la date sélectionnée, formatée à l'aide de la méthode toLocaleDateString() de l'objet Date.

const logElement = document.getElementById("log");
const inputElement = document.getElementById("date2");
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

logElement.innerText = `Valeur initiale : ${inputElement.valueAsDate}`;

inputElement.addEventListener("change", () => {
  if (inputElement.valueAsDate !== null) {
    logElement.innerText = `Vous avez sélectionné ${inputElement.valueAsDate.toLocaleDateString("en-US", options)}`;
  } else {
    logElement.innerText = `${inputElement.value} se résout en ${inputElement.valueAsDate}`;
  }
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Résultats

La date peut être décalée d'un jour en raison de votre fuseau horaire local.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <input>
• La propriété HTMLInputElement.value
• La propriété HTMLInputElement.valueAsNumber