Le champ datepicker permet aux utilisateurs de sélectionner une date à partir d'un calendrier personnalisable, et de taper la date directement dans le champ avec un support complet de l'internationalisation.
FormKit utilise une solution de masquage unique pour permettre aux utilisateurs de taper des dates dans le champ datepicker (tout en limitant les options disponibles aux valeurs valides) ou de sélectionner leur date via une entrée de calendrier.
Pour afficher un placeholder en mode double saisie, vous devez activer le masque overlay. Ce n'est pas nécessaire avec picker-only activé. Apprenez-en plus sur les masques et overlays ici.
Vous pouvez désactiver le mécanisme de saisie de texte et vous assurer que quelqu'un utilise le dialogue datepicker pour entrer sa date en ajoutant la propriété picker-only. En mode picker-only, cliquer sur le champ ouvrira immédiatement le dialogue. De plus, l'utilisation d'un overlay n'est pas requise pour le support de placeholder :
Le datepicker prend en charge les "dates stylées" de Intl.DateTimeFormat, ainsi que les formats de date basés sur des jetons. Pour changer le format affiché à l'utilisateur, modifiez la propriété format.
Si votre public est international, vous devriez envisager d'utiliser les "dates stylisées" car elles sont les formats de date les plus naturels dans chaque locale. Le format par défaut pour un sélecteur de date est long.
La propriété format peut accepter une simple chaîne comme long ou medium, dans ce cas elle utilise le dateStyle correspondant de Intl.DateTimeFormat. Alternativement, vous pouvez fournir un objet avec les propriétés date et time et leurs styles respectifs de Intl.DateTimeFormat ({ date: 'long', time: 'short' }).
Activez l'un des styles de date suivants avec la propriété format :
| Style de Format | Exemples |
|---|---|
| full | Wednesday, March 1, 2023, Mercredi 1 mars 2023 |
| long | March 1, 2023, 1 mars 2023 |
| medium | Mar 6, 2023, 6 mar 2023 |
| short | 3/1/23, 1/3/23 |
| Style de Format | Exemples |
|---|---|
| long | 7:05:00 PM, 19:05:00 |
| medium | 7:05:00 PM, 19:05:00 |
| short | 7:05 PM, 19:05 |
Vous pouvez utiliser la propriété format pour définir explicitement un format de date à jetons. Un format à jetons est représenté par une chaîne avec n'importe quels caractères arbitraires et une ou plusieurs des chaînes dans le tableau ci-dessous.
FormKit interagit avec Intl.DateTimeFormat pour internationaliser automatiquement les jetons en fonction de la locale actuelle. Par exemple, le jeton MMMM pour 2000-01-01 produirait January pour la locale en mais produirait 一月 pour la locale zh.
Il est possible, lors de l'utilisation de jetons, de créer des dates non analysables. Par exemple, si votre entrée affiche uniquement le jour de la semaine (dddd). Vous pouvez utiliser des formats de date non analysables uniquement en mode picker-only. Si vous souhaitez permettre à vos utilisateurs de saisir leur date, votre format doit inclure au moins un jeton pour le mois, le jour et l'année.
| Jetons | Exemples | Description |
|---|---|---|
YY | 99, 23, 00 | Année sur 2 chiffres |
YYYY | 1999, 2023, 2100 | Année sur 4 chiffres |
M | 1, 12 | Le mois de 1 à 12 |
MM | 01, 12 | Le mois de 01 à 12 |
MMM | Jan, Feb | Nom abrégé de Jan à Dec |
MMMM | January, February | Nom complet de January à December |
D | 1, 9, 22 | Le jour du mois de 1 à 31 |
DD | 01, 09, 22 | Le jour du mois de 01 à 31 |
d | L, M, M, J, V, S, D | Jour sur un chiffre "M" |
ddd | Jeu, Sam | Nom abrégé du jour "Jeu" |
dddd | Lundi, Mardi | Nom complet du jour "Mercredi" |
H | 0, 13, 23 | Heure minimum sur 24 heures, de 0 à 23 |
HH | 00, 13, 23 | Heure sur 2 chiffres, 24 heures, de 00 à 23 |
h | 12, 1, 11 | Heure minimum sur 12 heures, de 1 à 12 |
hh | 12, 01, 11 | Heure sur 2 chiffres, 12 heures, de 01 à 12 |
m | 1, 59 | La minute de 0 à 59 |
mm | 01, 59 | La minute de 00 à 59 |
s | 1, 59 | La seconde de 0 à 59 |
ss | 01, 59 | La seconde de 00 à 59 |
a | am, pm | am/pm |
A | AM, PM | AM/PM |
Bien que FormKit internationalisera automatiquement vos jetons — si votre formulaire est destiné à un public largement international, envisagez d'utiliser des styles de date au lieu de jetons car cela conduit à une date plus lisible dans de nombreux locales.
Pour inclure des lettres dans votre format qui sont elles-mêmes des jetons (comme a), vous pouvez échapper ces jetons avec un antislash \ avant le caractère :
Le popup du calendrier du datepicker a quatre "panneaux" :
day — Affiche une vue traditionnelle d'un mois avec chaque jour sélectionnable.month — Montre les 12 mois de l'année.year — Montre une décennie d'années à la fois.time — Montre l'heure du jour.Lorsqu'un utilisateur ouvre le popup du datepicker, un ou plusieurs de ces panneaux lui seront présentés. Vous pouvez modifier quels panneaux sont affichés à l'utilisateur et dans quel ordre ces panneaux doivent être affichés en fournissant une propriété sequence. La valeur par défaut de sequence est ['day'] (ce qui vous permet de naviguer vers les panneaux month et year).
Par exemple, lors de la sélection d'un anniversaire, il est naturel de sélectionner d'abord l'année de naissance, puis le mois, puis le jour. La propriété sequence permet ce comportement :
Le panneau time peut être utilisé pour permettre à un utilisateur de sélectionner une heure spécifique de la journée. Si vous choisissez un format qui inclut l'heure (comme YYYY-MM-DD HH:mm), vous voudrez probablement inclure le panneau time dans votre séquence :
Comme toutes les entrées, la value du datepicker est à la fois ce qui est produit par le datepicker et ce qui est lu dans le datepicker pour l'hydratation. Par défaut, le format de la valeur est une chaîne normalisée UTC ISO8601 (exemple : 2014-11-27T03:59:00.000Z). Cependant, ce format peut être changé pour n'importe lequel des styles de date pris en charge ou un format de jetons listé ci-dessus en utilisant la propriété value-format.
Une question valable est pourquoi ne pas toujours utiliser ISO8601 ? Bien que ce soit la manière la plus populaire de travailler avec les dates — elle est lisible par les machines et les humains — elle n'est pas très lisible par les humains. Par exemple, si votre formulaire envoie un email de demande de contact à une entreprise de restauration, alors ISO8601 ne serait probablement pas le meilleur choix.
Le format de la valeur doit contenir toutes les données nécessaires pour reconstituer un objet date, au minimum cela inclut le mois, le jour, l'année. Si votre entrée demande des informations à l'utilisateur qui ne sont pas représentées dans votre format de valeur, ces détails seront perdus.
Pour utiliser un style de date comme valeur, passez simplement le style que vous souhaitez utiliser à la propriété value-format :
Les valeurs peuvent également être représentées dans n'importe quel format arbitraire en utilisant des jetons de formatage :
Les valeurs passées à un sélecteur de date doivent :
value-format dans le value-locale actuel OU,Date JavaScript natif.Bien que les objets Date natifs soient toujours acceptés comme des entrées valides pour un sélecteur de date, ils seront immédiatement transformés dans le value-format spécifié.
value-formatDate nativeÉtant donné que le format de la valeur doit être analysé en utilisant la même locale avec laquelle elle a été créée, il est recommandé de toujours spécifier le value-locale lors de la définition d'un value-format personnalisé. Cela garantit que, quelle que soit la locale de l'utilisateur saisissant la date, la valeur restera cohérente :
Changer le value-locale n'a aucun effet sur le timezone de la date sélectionnée. Voir la documentation sur les fuseaux horaires ci-dessous pour plus d'explications.
Le temps est une chose notoirement difficile à gérer dans n'importe quel environnement logiciel, mais surtout dans le JavaScript basé sur navigateur. Le datepicker offre quelques options pour aider à surmonter ces défis.
Pour travailler avec les dates et les heures en JavaScript, il est utile d'avoir une compréhension de base de l'objet Date. L'objet date en JavaScript est fondamentalement un horodatage Unix (nombre de millisecondes depuis le 1er janvier 1970 à 00:00:00Z). Cependant, il est toujours localisé à l'heure du client. Cette localisation est exprimée par un décalage par rapport à UTC. L'heure actuelle de votre navigateur est :
Lorsque le décalage est appliqué à l'heure "horloge", vous arrivez à l'heure actuelle en UTC :
Lorsque vous utilisez des jetons value-format dans le sélecteur de date, ces jetons fonctionneront en utilisant le fuseau horaire du client. Par exemple, si votre format demande le jeton HH, il retournerait :
Comparez cela aux dates ci-dessus, et vous verrez que c'est la même chose que la partie heures de l'heure locale. Pourquoi cela importe-t-il ? Lisez la suite.
Prenons l'exemple d'une application de réservation pour un restaurant situé à Amsterdam (UTC +100/+200). C'est une destination populaire pour les touristes et ils font souvent des réservations plusieurs semaines avant de voyager (depuis leur pays d'origine).
Le sélecteur de date, par défaut, demandera au touriste la date et l'heure de la réservation souhaitée — mais (par défaut) la sélection sera à leur heure locale, et non à l'heure d'Amsterdam. Même si le value-format produit une sortie en UTC, l'heure ne correspondra pas à l'heure de réservation prévue à Amsterdam (à moins qu'ils ne se trouvent dans le même fuseau horaire).
De manière générale, il existe 2 solutions à ce problème :
Utiliser une heure "indéterminée" (parfois appelée "heure murale"). Une heure indéterminée est une heure sans corrélation spécifique avec un Timestamp Unix sous-jacent. Par exemple, 14h le 13 mars n'est pas en UTC et n'a pas de décalage horaire explicite. 14h le 13 mars décrit une heure spécifique dans un lieu/fuseau horaire indéterminé. Vous pouvez faire cela avec des jetons de formatage comme (YYYY-MM-DD HH:mm) tant que vous n'utilisez pas le décalage dans votre valeur (Z).
Cela fonctionnerait pour notre application de restaurant tant qu'un backend est capable d'associer un fuseau horaire ou un décalage approprié à cette heure indéterminée 2023-03-13 14:00 GMT+0100 pour arriver à l'heure UTC appropriée (ce que cette application fictive nécessite dans sa base de données). Le défi restant, pour un développeur backend, est de savoir quel décalage appliquer à la date pour s'assurer qu'elle devienne "heure d'Amsterdam" (ce décalage varie en fonction de la période de l'année en raison du changement d'heure à Europe/Amsterdam).
timezone du sélecteur de dateAlternativement, la propriété timezone du sélecteur de date effectuera la correction de décalage pour vous automatiquement. Il suffit de préciser "où" le sélecteur de date choisit l'heure — dans notre exemple timezone="Europe/Amsterdam". L'expérience de l'utilisateur ne changera pas du tout, mais l'heure qu'il sélectionne sera dans le fuseau horaire cible. Un utilisateur en America/New_York (+0400) qui sélectionne 14h le 13 mars dans son sélecteur de date, obtiendra une valeur UTC de 2023-03-13T13:00:00Z qui est 14h à Amsterdam. Cela permet de stocker et d'hydrater facilement votre date en utilisant un format UTC.
Par défaut, le sélecteur de date utilise le fuseau horaire local du client lorsqu'une sélection est effectuée. La valeur de la sortie est déterminée par le value-format (voir ci-dessus) — par défaut, il s'agit d'une chaîne normalisée UTC ISO8601. Cependant, en spécifiant un format personnalisé, vous pouvez obtenir une heure "indéterminée" (également appelée "heure murale"). Il s'agit d'une date et/ou d'une heure sans corrélation spécifique avec un fuseau horaire donné.
Par exemple, lorsque vous réglez une alarme sur votre téléphone pour 8h00 — cette heure est "indéterminée" — elle n'a aucune corrélation avec le fuseau horaire. Si vous vivez à Rome et voyagez à Tokyo, votre alarme sonnera à 8h00 à Tokyo de la même manière qu'elle sonnerait à 8h00 à Rome. Il est impossible de représenter cela en UTC.
Vous pouvez obtenir une heure indéterminée avec le sélecteur de date en ne fournissant aucune information de fuseau horaire ou de décalage dans votre value-format — il appartient à l'interprète de la date d'ajouter ces informations. Les jetons dans un value-format produisent toujours des valeurs locales du client — donc en laissant de côté toute donnée de fuseau horaire ou de décalage (Z), elle est intrinsèquement "indéterminée" :
Pour certaines applications, il est nécessaire de sélectionner l'heure dans un lieu donné — cela peut être assez compliqué. Pour faciliter cette tâche, le sélecteur de date prend en charge la possibilité de spécifier explicitement le fuseau horaire de l'entrée.
La propriété timezone vous permet de spécifier la "localisation" du sélecteur de date en fonction des fuseaux horaires IANA pris en charge par le navigateur. Cela est important lorsque vous souhaitez permettre aux utilisateurs de sélectionner une date et une heure dans un lieu géographique donné, peu importe où se trouve le client. Voici quelques exemples de cas d'utilisation :
Il y a de nombreuses situations où le fuseau horaire ne devrait pas être utilisé (par défaut, celui du client) :
Dans l'exemple ci-dessous, un utilisateur doit récupérer une voiture de location à Kolkata, en Inde, après un vol international. L'utilisateur regarde son billet — le vol arrive à Kolkata à 13h45. Il aimerait prendre la voiture 45 minutes plus tard à 14h30. Ces faits sont vrais peu importe où dans le monde l'utilisateur réserve son voyage. Dans ce cas, nous devrions régler le fuseau horaire sur Asia/Kolkata. Le décalage à Kolkata est de +5h30 — donc sélectionner 14h30 à Kolkata est équivalent à 09h00 UTC :
La plupart des navigateurs sont livrés avec une base de données IANA complète intégrée dans Intl.DateTimeFormat. C'est excellent puisque FormKit n'a pas besoin d'envoyer la base de données (assez étendue) des fuseaux horaires au navigateur du client. Cependant, certains navigateurs plus anciens peuvent ne pas avoir la base de données IANA. Ces données peuvent être polyfillées facilement en utilisant polyfill.io avec Intl.DateTimeFormat.~timeZone.all.
Il est souvent nécessaire de désactiver certaines dates dans le sélecteur de date. Il existe trois manières de désactiver des dates dans le sélecteur de date :
min-date - une propriété pour contrôler quelle est la première date disponible.max-date - une propriété pour contrôler quelle est la dernière date disponible.disabled-dates - une propriété pour contrôler si une date arbitraire doit être désactivée ou non.Toute date qui est désactivée ne peut pas être sélectionnée dans le pop-up du sélecteur de date, cependant une date non disponible peut toujours être définie comme valeur initiale ou en la saisissant dans l'entrée (lorsqu'elle n'est pas en mode picker-only). Pour gérer ces cas particuliers, le sélecteur de date dispose d'une règle de validation intégrée (qui ne peut pas être désactivée) qui garantit que seules les dates valides peuvent être soumises. La clé de la règle de validation est invalidDate.
Il est souvent nécessaire de désactiver les dates antérieures à une date particulière. Par exemple, la réservation d'une chambre d'hôtel ne devrait se faire que pour des dates futures. Pour cela, utilisez la propriété min-date avec soit une chaîne compatible ISO8601, soit un objet Date natif :
Pour désactiver toutes les dates après une date donnée, utilisez la propriété max-date. Par exemple, un sélecteur d'anniversaire ne devrait permettre que des dates passées. Pour cela, utilisez la propriété max-date avec soit une chaîne compatible ISO8601, soit un objet Date natif :
Vous pouvez utiliser min-date et max-date en même temps. Non seulement cela limitera la plage de dates, mais en plus cela limitera les années disponibles à seulement celles valides lors de l'utilisation de la saisie de texte.
Nos applications nécessitent souvent une granularité bien plus fine pour désactiver des dates que ce que min-date et max-date permettent. Le sélecteur de date offre un contrôle précis en utilisant la propriété disabled-days.
La propriété disabled-days attend une fonction qui reçoit 2 arguments : le nœud central et un objet Date. La responsabilité de la fonction est de retourner un booléen indiquant si la date est désactivée (true signifie désactivée).
La propriété disabled-days prévaut sur min-date et max-date — vous pouvez choisir de réimplémenter la fonctionnalité de base en accédant à node.props.minDate ou node.props.maxDate.
Il est important que la fonction fournie soit rapide et synchrone — elle sera appelée fréquemment et de manière répétée. Par exemple, si vous avez besoin de récupérer des informations d'une base de données, faites-le en dehors de cette fonction et utilisez cette fonction pour accéder aux résultats mis en mémoire.
Lors de la navigation dans le calendrier pop-up via le clavier, le sélecteur de date ne vous permettra pas de sélectionner une date désactivée. Cependant, cela peut être ennuyeux car cela peut créer des zones d'inaccessibilité si certaines dates disponibles sont "coincées" entre des dates indisponibles.
Pour améliorer l'expérience utilisateur, le sélecteur de date va automatiquement scanner en avant ou en arrière (selon la direction souhaitée) pour la prochaine date disponible à sélectionner. Le nombre maximum de jours à scanner pour trouver un jour disponible est contrôlé par la propriété maxScan (7 jours par défaut) :
L'entrée du sélecteur de date peut être effacée en cliquant sur le bouton "effacer" qui apparaît lorsque l'entrée a une valeur — ce bouton d'effacement n'apparaît que lorsque la propriété clearable est ajoutée :
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| clearable | string | false | Ajoute un bouton d'effacement à droite de la valeur. Ce bouton n'apparaît que lorsque l'entrée a une valeur complète. |
| date-format | string | D | Le format de jeton à utiliser dans le calendrier pour les dates du mois. |
| disabled-days | function | logique de date min/max | Une fonction qui reçoit le nœud principal et un objet `Date` et doit retourner si la date est désactivée (`true` est désactivé). |
| format | string/object | date: 'long' | Le format à afficher à l'utilisateur dans l'entrée de sélection. |
| max-date | Date | ISO8601 | none | La date maximale que l'utilisateur est autorisé à sélectionner. |
| max-scan | number | 7 | Le nombre maximum de jours à scanner en avant ou en arrière lors de la recherche d'une date disponible à laquelle sauter via la navigation au clavier. |
| min-date | Date | ISO8601 | none | La date la plus précoce que l'utilisateur est autorisé à sélectionner. |
| month-button-format | string | MMMM | Le jeton de format de date à utiliser pour le bouton du panneau du mois dans le popup du calendrier. |
| month-format | string | MMMM | Le jeton de format de date à utiliser pour chacun des 12 mois sur le panneau du mois. |
| overlay | boolean | false | Indique s'il faut afficher ou non un masque de superposition. En savoir plus sur les superpositions dans la documentation de saisie de masque (n'a aucun effet en mode `pickerOnly`). |
| picker-only | boolean | false | Indique s'il faut permettre ou non la saisie de la date via l'entrée de texte. Lorsque le mode picker-only est activé, seul le sélecteur peut être utilisé pour sélectionner une date. |
| show-months | number | 1 | Le nombre de mois à afficher dans le popup lorsqu'on est sur le panneau du jour. |
| sequence | array | ['day'] | La séquence de panneaux à parcourir pour un utilisateur lorsqu'il ouvre la vue du calendrier du sélecteur de date. Les options sont `year`, `month`, `day`, `time`. |
| value-format | string/object | ISO8601 | Le format à enregistrer comme valeur de l'entrée. Cela peut être composé avec n'importe quel format de jeton, style de date ou `ISO8601`. |
| value-locale | string | `node.props.locale` | La locale à utiliser pour le `valueFormat`. Lors de l'utilisation de jetons de format dans la propriété `valueFormat`, il est fortement recommandé de définir un `valueFormat` explicite. |
| week-start | number | 0 | Le jour de la semaine pour commencer le calendrier du panneau `day`. 0-6 où 0 = dimanche et 6 = samedi. |
| weekday-format | string | d | Le jeton de format de date utilisé pour rendre les en-têtes de colonne du jour de la semaine. |
| year-format | string | YYYY | Le jeton de format de date utilisé pour rendre les années dans le panneau `year`. |
| popover | boolean | false | Affiche le panneau UI de l'entrée en utilisant l'API Popover du navigateur. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
Vous pouvez cibler une section spécifique d'une entrée en utilisant la "clé" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema), ou le contenu (via les slots). Lisez plus sur les sections ici.
Cette section se trouve à l'intérieur de la section inner lorsque la propriété overlay est ajoutée.
Le panneau apparaît sous l'élément de saisie à l'intérieur de la section inner lorsque la fenêtre contextuelle du sélecteur de date est ouverte.
Le panneau apparaît sous l'élément de saisie dans la section inner lorsque la popup du sélecteur de date est ouverte.
Le panneau apparaît sous l'élément de saisie dans la section inner lorsque la popup du sélecteur de date est ouverte.
Le panneau apparaît sous l'élément de saisie dans la section inner lorsque la popup du sélecteur de date est ouverte.
| Section-key | Description |
|---|---|
| calendar | L'enveloppe immédiate autour du calendrier sur le panneau du jour. |
| calendarHeader | L'enveloppe autour des colonnes d'en-tête sur le panneau du jour. |
| calendarWeeks | L'enveloppe immédiate autour de chaque rangée de semaines sur le panneau du jour. |
| day | Le contenu du jour — par défaut contient le jour numérique. Dans cet emplacement/section, vous pouvez utiliser context.day ($day dans le schéma) pour obtenir l'objet date pour le jour donné. |
| dayButton | Le bouton affiché dans l'en-tête du panneau de l'heure qui navigue vers le panneau du jour. |
| dayCell | L'enveloppe immédiate autour de la section de la date. Dans cet emplacement/section, vous pouvez utiliser context.day ($day dans le schéma) pour obtenir l'objet date pour le jour donné. |
| daysHeader | L'enveloppe autour des colonnes d'en-tête sur le panneau de la date. |
| month | La section qui rend les noms des mois réels sur le panneau du mois. Dans cet emplacement/section, vous pouvez utiliser context.month ($month dans le schéma) pour obtenir l'objet date pour le mois donné. |
| monthButton | Le bouton dans l'en-tête des panneaux du jour et de l'heure qui navigue vers le panneau du mois. |
| months | L'enveloppe immédiate autour des sections des mois sur le panneau du mois. |
| monthsHeader | L'enveloppe immédiate autour des boutons d'en-tête (yearButton) sur le panneau du mois. |
| next | Dans l'en-tête du panneau, le bouton responsable de la navigation vers le mois ou la décennie suivante. |
| nextLabel | La section responsable du rendu du contenu textuel du bouton suivant dans l'en-tête du panneau. |
| panelClose | La section responsable du rendu du bouton de fermeture du sélecteur de date, affiché sur les petits appareils tactiles. |
| closeIcon | L'icône rendue à l'intérieur de la section panelClose. |
| openButton | Le bouton responsable de l'ouverture de la boîte de dialogue du sélecteur. |
| overlay | L'enveloppe extérieure de la superposition. La superposition est utilisée pour imiter le texte qui est dans la saisie de texte pendant le mode de saisie de texte pour permettre le style. |
| overlayChar | Une section contenant des caractères de superposition de type char |
| overlayEnum | Une section contenant des caractères de superposition de type enum |
| overlayInner | Une enveloppe intérieure immédiatement à l'intérieur de la section de superposition. |
| overlayLiteral | Une section contenant des caractères de superposition de type littéral |
| overlayParts | Une section contenant toutes les parties de superposition en tant qu'enfants immédiats. |
| overlayPlaceholder | Une section contenant des caractères de superposition de type espace réservé. |
| panel | Une enveloppe autour du panneau actuellement actif. Ceci est rendu en dessous de l'en-tête du panneau en tant que frère. |
| panelHeader | Une enveloppe autour de l'en-tête de chaque panneau où se trouvent les boutons de navigation du panneau. C'est un frère de la section du panneau. |
| panelWrapper | Une enveloppe autour des sections du panneau et de l'en-tête du panneau, cette section est responsable de l'affichage ou de la dissimulation de la boîte de dialogue du sélecteur. |
| prev | Dans l'en-tête du panneau, le bouton responsable de la navigation vers le mois ou la décennie précédente. |
| prevLabel | La section responsable du rendu du contenu textuel du bouton précédent dans l'en-tête du panneau. |
| time | Le panneau de l'heure qui contient le timeInput. |
| timeHeader | L'en-tête du panneau de l'heure avec des boutons de navigation vers les panneaux de l'année, du mois et du jour. |
| timeInput | Une saisie HTML time native responsable de la définition de l'heure de la date sélectionnée. |
| week | Une enveloppe autour d'une rangée de 7 jours sur le panneau du jour. |
| weekDay | La cellule responsable du rendu du jour de la semaine dans l'en-tête du calendrier du panneau du jour (L, M, M, etc...). |
| weekDays | L'élément enveloppant autour des jours de la semaine sur l'en-tête du calendrier du panneau du jour. |
| year | L'élément responsable du rendu de chacune des années disponibles sur le panneau de l'année. |
| yearButton | Le bouton dans l'en-tête des panneaux du mois, du jour et de l'heure qui navigue vers le panneau de l'année. |
| years | Le panneau des années, responsable du rendu d'une décennie d'années à la fois. |
| yearsHeader | L'en-tête du panneau lorsqu'on est sur le panneau des années, montre la plage d'années de la décennie actuelle. |
| Afficher Universel section keys | |
| outer | L'élément d'enrobage le plus externe. |
| wrapper | Un enrobage autour de l'étiquette et de l'entrée. |
| label | L'étiquette de l'entrée. |
| prefix | N'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée. |
| prefixIcon | Un élément pour afficher une icône avant la section de préfixe. |
| inner | Un enrobage autour de l'élément d'entrée réel. |
| suffix | N'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée. |
| suffixIcon | Un élément pour afficher une icône après la section de suffixe. |
| input | L'élément d'entrée lui-même. |
| help | L'élément contenant le texte d'aide. |
| messages | Un enrobage autour de tous les messages. |
| message | L'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur. |
Tous les champs de saisie FormKit sont conçus en tenant compte des considérations d'accessibilité suivantes. Aidez-nous à améliorer continuellement l'accessibilité pour tous en signalant les problèmes d'accessibilité ici :
| Clé de Section | Attribut | Par défaut | Description |
|---|---|---|---|
| panelWrapper | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| aria-modal | true | Indique que la boîte de dialogue modale est présente et qu'elle bloque l'interaction avec les autres éléments de la page. | |
| aria-label | Fournit un nom accessible. | ||
| weekDay | aria-label | Fournit un nom accessible. | |
| dayCell | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur 0 lorsque c'est le même jour et -1 lorsqu'il ne l'est pas. |
| aria-selected | Indique si le jour est actuellement sélectionné. | ||
| aria-label | Fournit un nom accessible. | ||
| openButton | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est en mode sélectionneur uniquement et 0 lorsqu'il ne l'est pas. |
| aria-label | Fournit un nom accessible. | ||
| aria-haspopup | true | Signale la présence d'un menu contextuel ou d'une boîte de dialogue déclenchée par cette interaction. | |
| aria-expanded | Indique si l'élément colorpicker est actuellement déployé ou réduit. | ||
| aria-controls | Lie cet élément à l'ID de l'élément listbox. | ||
| year | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur 0 lorsque c'est la même année et -1 lorsqu'il ne l'est pas. |
| aria-selected | Indique si l'année est actuellement sélectionnée. | ||
| month | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur 0 lorsque c'est le même mois et -1 lorsqu'il ne l'est pas. |
| aria-selected | Indique si le mois est actuellement sélectionné. | ||
| panelHeader | aria-live | polite | Annonce aux lecteurs d'écran que cet élément a été mis à jour dynamiquement sans interrompre la tâche en cours. |
| dayButton | tabindex | 2 | Priorise l'ordre de focus au clavier en le réglant sur 2. |
| removeSelection | aria-controls | Lie cet élément à l'ID de l'élément de saisie. | |
| panelClose | tabindex | -1 | Priorise l'ordre de focus au clavier en le réglant sur -1. |
| aria-label | Fournit un nom accessible. | ||
| Afficher Universel clé de section | |||
| label | label | for | Associe cela à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| input | input | disabled | Désactive un élément HTML, empêchant l'interaction de l'utilisateur et signalant un état non interactif |
| aria-describedby | Améliore l'accessibilité en associant un élément à une description, facilitant la lecture par les lecteurs d'écran | ||
| aria-required | Ajoute l'état requis lorsque la validation est requise. | ||
| icon | icon | for | Chaque fois qu'une icône est définie comme libellé, elle la relie à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| Événement clavier | Description |
|---|---|
| Tab | Déplace le focus vers la prochaine entrée pouvant être ciblée sur la page. |
| Shift + Tab | Déplace le focus vers l'entrée précédente pouvant être ciblée sur la page. |