diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-19 15:28:27 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-19 10:28:27 -0400 |
| commit | 1feae14e455488e46a8bbf593ad8f56b9096b724 (patch) | |
| tree | 914cbc25bc5dce1b84eb671899b7039fb76789fc /files/fr/web/html/element/input/datetime-local | |
| parent | 23cf6c4496e383d0e8935a49557b224c053efcf9 (diff) | |
| download | translated-content-1feae14e455488e46a8bbf593ad8f56b9096b724.tar.gz translated-content-1feae14e455488e46a8bbf593ad8f56b9096b724.tar.bz2 translated-content-1feae14e455488e46a8bbf593ad8f56b9096b724.zip | |
Fixes #3885 - Removes {{page}} from Web/HTML (fr) (#3966)
* img element
* Update date time vs en-US / rm page and other xref macros
* Datetime-local update + typofix for date
* input email to parity vs en-US / rm macros
* input month parity vs en-US
* fix sidebar month
* number parity vs en-US / typo month
* track - parity en-us / rm macros
* password - parity vs en-us and macro removal / typos on number
* input range vs en-US
* input search vs en-US
* input tel
* input week
* input url
* fix flaws input week
* input time
* fix frontmatter case
* fix flaws
* Typo and link fixes/nitpicking part 1
* Various fixes/nitpicking part 2, add fr images
Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>
Diffstat (limited to 'files/fr/web/html/element/input/datetime-local')
| -rw-r--r-- | files/fr/web/html/element/input/datetime-local/index.md | 346 |
1 files changed, 157 insertions, 189 deletions
diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md index a5d22bfb05..840721237f 100644 --- a/files/fr/web/html/element/input/datetime-local/index.md +++ b/files/fr/web/html/element/input/datetime-local/index.md @@ -1,190 +1,199 @@ --- title: <input type="datetime-local"> -slug: Web/HTML/Element/Input/datetime-local -tags: - - Date - - Element - - Formulaires - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/datetime-local translation_of: Web/HTML/Element/input/datetime-local +browser-compat: html.elements.input.input-datetime-local --- -{{HTMLRef}} +{{HTMLRef("Input_types")}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"datetime-local"`** permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`"datetime-local"`** permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle. {{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}} -L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). +L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). -Les secondes ne sont pas prises en charge. - -Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et _pas nécessairement la date et l'heure locale de l'utilisateur_. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement. +Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et _pas nécessairement la date et l'heure locale de l'utilisatrice ou l'utilisateur_. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisatrice ou l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement. En raison du faible support pour `datetime-local` et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un _framework_ ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (`type="date"`) et pour l'heure (`type="time"`) qui sont mieux pris en charge. Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur. +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur<strong></td> + <td>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui représente une date et une heure (selon le fuseau horaire local) ou bien une chaîne de caractères vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a>, <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>.</td> + </tr> + </tbody> +</table> + ## Valeur -Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales). Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} : +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Date_and_time_formats). Il est possible d'indiquer une date par défaut grâce à l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <label for="party">Veuillez saisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"> ``` -{{EmbedLiveSample('Valeur', 600, 60)}} +{{EmbedLiveSample('', 600, 60)}} -On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante : `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : `partydate=2017-06-01T08:30`. +On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisatrice ou l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante : `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : `partydate=2017-06-01T08:30`. -> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/HTTP/Méthode/GET), les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}. +> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/Web/HTTP/Methods/GET), les deux points (`:`) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser [`encodeURI()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURI). -En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : +En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). Par exemple : ```js -var dateControl = document.querySelector('input[type="datetime-local"]'); -date.value = '2017-06-01T08:30'; +let dateControl = document.querySelector('input[type="datetime-local"]'); +dateControl.value = '2017-06-01T08:30'; ``` -Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}). +Plusieurs méthodes, fournies par JavaScript (cf. [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date)), peuvent être utilisées afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode [`Date.toISOString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)). ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants : - -| Attribut | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La date la plus avancée qui peut être saisie. | -| `{{anch("min")}}` | La date la plus reculée qui peut être saisie. | -| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `"date"` gèrent les attributs suivants. -### {{htmlattrdef("max")}} +### `max` -La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur maximale. +La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur maximale. La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur minimale. +La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur minimale. La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`. -### {{htmlattrdef("step")}} +### `step` -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +L'attribut `step` est un nombre qui indique le « pas » suivi par le compteur. Il peut également prendre la valeur spéciale `any` (décrite ci-après). Seules les valeurs qui suivent cette progression (à partir de `min` ou de `value` si ces attributs sont fournis) seront considérées comme valides. -Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60 000 millisecondes). +Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide. + +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie. + +Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60 000 millisecondes). _À l'heure où ces lignes sont écrites, la signification de la valeur `any` pour l'attribut `step` pour les champs `datetime-local` n'est pas certaine. Cette information sera mise à jour dès que possible._ ## Utiliser les contrôles `datetime-local` -Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de `<input type="datetime-local">` dans les différents navigateurs. +Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au serveur, quelle que soit la locale de l'utilisatrice ou l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de `<input type="datetime-local">` dans les différents navigateurs. Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs. ### Utilisation simple de `datetime-local` -Dans sa forme la plus simple, `<input type="datetime-local">` peut s'utilisere avec un élément `<input>` et un élément {{htmlelement("label")}} comme ceci : +Dans sa forme la plus simple, `<input type="datetime-local">` peut s'utiliser avec un élément `<input>` et un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) comme ceci : ```html <form> - <label for="party">Veuillez choisir une date et une heure pour la fête :</label> - <input id="party" type="datetime-local" name="partydate"> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate"> </form> ``` -{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Paramétrer des dates et heures minimales/maximales -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au `2017-06-01T08:30` et une date maximale au `2017-06-30T16:30`: +Les attributs `min` et `max` permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au `2017-06-01T08:30` et une date maximale au `2017-06-30T16:30` : ```html - <form> - <label for="party">Veuillez choisir une date et une heure pour la fête :</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> - </form> +<form> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> +</form> ``` -{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -Par conséquent : +Par conséquent : -- Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées.. -- Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}). +- Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées. +- Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. [Validation](#validation)). -> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité. +> **Note :** L'attribut `step` devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité. ### Contrôler la taille du champ -`<input type="datetime-local">` ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour les problèmes relatifs au dimensionnement. +`<input type="datetime-local">` ne prend pas en charge des attributs tels que `size`. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour les problèmes relatifs au dimensionnement. ### Paramétrer le fuseau horaire -Les champs `datetime-local` ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type [`datetime`](/fr/docs/Web/HTML/Element/input/datetime) qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire. +Les champs `datetime-local` ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type [`datetime`](/fr/docs/Web/HTML/Element/Input/datetime) qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire. -Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type [`hidden`](/fr/docs/Web/HTML/Element/input/hidden). Par exemple : +Ainsi, si vous créez un système où l'utilisatrice ou l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden). Par exemple : ```html <input type="hidden" id="timezone" name="timezone" value="-08:00"> ``` -Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} : +Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément [`<select>`](/fr/docs/Web/HTML/Element/select) : ```html -<select name="timezone_offset" id="timezone-offset" class="span5"> - <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> - <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> - <option value="-10:00">(GMT -10:00) Hawaii</option> - <option value="-09:50">(GMT -9:30) Taiohae</option> - <option value="-09:00">(GMT -9:00) Alaska</option> - <option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option> - - ... - +<select name="timezone" id="timezone"> + <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option> + <option value="Pacific/Midway">Midway Island, Samoa</option> + <option value="Pacific/Honolulu">Hawaii</option> + <option value="Pacific/Marquesas">Taiohae</option> + <!-- et ainsi de suite --> </select> ``` Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué). -> **Note :** Le fragment de code précédent est tiré de [Tous les fuseaux horaires du monde dans un élément `<select>`](https://gist.github.com/nodesocket/3919205). - ## Validation Par défaut, `<input type="datetime-local">` n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple). -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide. +Les attributs `min` et `max` permettent de restreindre les dates disponibles et `required` rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide. -Prenons un exemple avec des dates mini/maxi et le champ obligatoire : +Prenons un exemple avec des dates mini/maxi et le champ obligatoire : ```html <form> - <div> - <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Réserver !"> - </div> + <div> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Réserver !"> + </div> </form> ``` -Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat : +Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat : -{{EmbedLiveSample('Validation', 600, 120)}} +{{EmbedLiveSample('', 600, 120)}} -Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement. +Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intérieur du contrôle et ne peut pas être affiché/mis en forme efficacement. ```css div { - margin-bottom: 10px; - display: flex; - align-items: center; + margin-bottom: 10px; + display: flex; + align-items: center; } label { @@ -193,44 +202,44 @@ label { } input:invalid+span:after { - content: '✖'; - padding-left: 5px; + content: '✖'; + padding-left: 5px; } input:valid+span:after { - content: '✓'; - padding-left: 5px; + content: '✓'; + padding-left: 5px; } ``` -> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application. +> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application. ## Gérer la prise en charge des navigateurs -Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. +Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. -Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part. +Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problèmes de cohérence d'interface graphique d'une part et de représentation des données d'autre part. -C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle `datetime-local` est toujours normalisée sous la forme `yyyy-mm-ddThh:mm`. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants : +C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle `datetime-local` est toujours normalisée sous la forme `YYYY-MM-DDThh:mm`. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants : -- `ddmmyyyy` -- `dd/mm/yyyy` -- `mm/dd/yyyy` -- `dd-mm-yyyy` -- `mm-dd-yyyy` -- `mm-dd-yyyy hh:mm` (heure exprimée sur 12 heures) -- `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures) +- `DDMMYYYY` +- `DD/MM/YYYY` +- `MM/DD/YYYY` +- `DD-MM-YYYY` +- `MM-DD-YYYY` +- `MM-DD-YYYY hh:mm` (heure exprimée sur 12 heures) +- `MM-DD-YYYY HH:mm` (heure exprimée sur 24 heures) - etc. -Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : +Une façon de contourner ce problème est de placer un attribut `pattern` dans l'élément `<input type="datetime-local">`. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : ```html <form> <div> - <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> <input id="party" type="datetime-local" name="partydate" - min="2017-06-01T08:30" max="2017-06-30T16:30" - pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + min="2017-06-01T08:30" max="2017-06-30T16:30" + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> <span class="validity"></span> </div> <div> @@ -240,11 +249,11 @@ Une façon de contourner ce problème est de placer un attribut {{htmlattrxref(" </form> ``` -{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} +{{EmbedLiveSample('', 600, 100)}} Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme `nnnn-nn-nnTnn:nn` avec `n` qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées. -De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ? +De plus, comment la personne remplissant le formulaire doit-elle comprendre la règle de format qui lui est imposée pour saisir une date et une heure ? Bref, il y a toujours un problème. @@ -274,15 +283,15 @@ input:valid + span:after { } ``` -Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que [le sélecteur de date jQuery](https://jqueryui.com/datepicker/) et [le sélecteur d'heure jQuery](https://timepicker.co/). +Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments [`<select>`](/fr/docs/Web/HTML/Element/select)) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que [le sélecteur de date jQuery](https://jqueryui.com/datepicker/) et [le sélecteur d'heure jQuery](https://timepicker.co/). ## Exemples -Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif `<input type="datetime-local">` d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif. +Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif `<input type="datetime-local">` d'une part et un ensemble de cinq éléments [`<select>`](/fr/docs/Web/HTML/Element/select) d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif. -{{EmbedLiveSample('Exemples', 600, 140)}} +{{EmbedLiveSample('', 600, 140)}} -Voici le fragment de code HTML utilisé : +Voici le fragment de code HTML utilisé : ```html <form> @@ -367,19 +376,19 @@ input:valid+span:after { } ``` -Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type `datetime-local` puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera `text`. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})). +Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément [`<input>`](/fr/docs/Web/HTML/Element/Input) auquel on attribue le type `datetime-local` puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera `text`. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments [`<select>`](/fr/docs/Web/HTML/Element/select)). ```js // On définit les différentes variables -var nativePicker = document.querySelector('.nativeDateTimePicker'); -var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); +let nativePicker = document.querySelector('.nativeDateTimePicker'); +let fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +let fallbackLabel = document.querySelector('.fallbackLabel'); -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); -var daySelect = document.querySelector('#day'); -var hourSelect = document.querySelector('#hour'); -var minuteSelect = document.querySelector('#minute'); +let yearSelect = document.querySelector('#year'); +let monthSelect = document.querySelector('#month'); +let daySelect = document.querySelector('#day'); +let hourSelect = document.querySelector('#hour'); +let minuteSelect = document.querySelector('#minute'); // Initialement, on masque le sélecteur non-natif fallbackPicker.style.display = 'none'; @@ -387,8 +396,13 @@ fallbackLabel.style.display = 'none'; // On teste si l'élément <input type="date"> // se transforme en <input type="text"> -var test = document.createElement('input'); -test.type = 'date'; +let test = document.createElement('input'); + +try { + test.type = 'datetime-local'; +} catch (e) { + console.log(e.description); +} // Si c'est le cas, cela signifie que l'élément // n'est pas pris en charge et if(test.type === 'text') { @@ -415,7 +429,7 @@ function populateDays(month) { // On crée une variable afin de contenir le nombre // de jours à afficher - var dayNum; + let dayNum; // 31 ou 30 jours ? if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { @@ -424,16 +438,16 @@ function populateDays(month) { dayNum = 30; } else { // Si le mois est février, on calcule si l'année est bissextile - var year = yearSelect.value; - var leap = new Date(year, 1, 29).getMonth() == 1; + let year = yearSelect.value; + let leap = new Date(year, 1, 29).getMonth() == 1; leap ? dayNum = 29 : dayNum = 28; } // on ajoute le bon nombre de jours dans autant // d'éléments <option> pour l'élément <select> // pour la journée - for(i = 1; i <= dayNum; i++) { - var option = document.createElement('option'); + for(let i = 1; i <= dayNum; i++) { + let option = document.createElement('option'); option.textContent = i; daySelect.appendChild(option); } @@ -463,14 +477,14 @@ function populateDays(month) { function populateYears() { // On obtient l'année courante - var date = new Date(); - var year = date.getFullYear(); + let date = new Date(); + let year = date.getFullYear(); // On affiche l'année courante et les 100 années // précédentes pour l'élément <select> destiné à // stocker l'année - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 100; i++) { + let option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } @@ -479,8 +493,8 @@ function populateYears() { function populateHours() { // on crée 24 valeurs pour l'élément <select> // associé aux heures - for(var i = 0; i <= 23; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 23; i++) { + let option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; hourSelect.appendChild(option); } @@ -489,8 +503,8 @@ function populateHours() { function populateMinutes() { // On crée 60 valeurs pour l'élément <select> // associé aux minutes - for(var i = 0; i <= 59; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 59; i++) { + let option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; minuteSelect.appendChild(option); } @@ -507,9 +521,9 @@ monthSelect.onchange = function() { } // On conserve le jour sélectionné -var previousDay; +let previousDay; -// On met à jour la journée utilisé précédemment +// On met à jour la journée utilisée précédemment // (voir la fin de populateDays() pour voir où // est utilisée cette valeur) daySelect.onchange = function() { @@ -517,67 +531,21 @@ daySelect.onchange = function() { } ``` -> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente une date et une heure (selon le fuseau horaire local) ou bien - une chaîne de caractères vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("step", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>list</code>, <code>value</code>, <code>valueAsNumber</code>. - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. - </td> - </tr> - </tbody> -</table> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-datetime-local")}} +{{Compat}} ## Voir aussi -- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}} -- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) and [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) -- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) -- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- L'élément générique [`<input>`](/fr/docs/Web/HTML/Element/Input) ainsi que l'interface DOM qui le porte : [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) +- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) +- [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) +- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Learn/Forms/Basic_native_form_controls#sélection_de_date_et_heure) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Date_and_time_formats) +- [La compatibilité des propriétés CSS pour les éléments de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) |