L'entrée datepicker permet aux utilisateurs de sélectionner une date à partir d'un calendrier personnalisable, et de taper la date directement dans l'entrée avec un support complet de l'internationalisation.
FormKit utilise une solution de masquage unique pour permettre aux utilisateurs de taper des dates dans l'entrée du datepicker (tout en limitant les options disponibles aux seules valeurs valides) ou de sélectionner leur date via une entrée de calendrier.
Pour afficher un placeholder en mode double entrée, vous devez activer le masque overlay. Ceci n'est pas nécessaire avec picker-only activé. En savoir plus sur les masques et les overlays ici.
Vous pouvez désactiver le mécanisme d'entrée de texte et vous assurer que quelqu'un utilise le dialogue du datepicker pour entrer sa date en ajoutant la propriété picker-only. En mode picker-only, un clic sur l'entrée ouvrira immédiatement le dialogue. De plus, l'utilisation d'un overlay n'est pas nécessaire pour le support du placeholder :
Le datepicker prend en charge les dates "stylisées" 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 de rester avec les "dates stylisées" car ce sont les formats de date les plus naturels dans chaque locale. Le format par défaut pour un datepicker est long.
La propriété format peut accepter une simple chaîne comme long ou medium, auquel cas elle utilise le dateStyle Intl.DateTimeFormat correspondant. Alternativement, vous pouvez fournir un objet avec les propriétés date et time et leurs styles Intl.DateTimeFormat respectifs ({ date: 'long', time: 'short' }).
Activez l'un des styles de date suivants avec la propriété format :
| Style de format | Exemples |
|---|---|
| full | Mercredi 1 mars 2023, Mercoledì 1 marzo 2023 |
| long | 1 mars 2023, 1 marzo 2023 |
| medium | 6 mar 2023, 6 mar 2023 |
| short | 1/3/23, 1/3/23 |
| Style de format | Exemples |
|---|---|
| long | 19:05:00 PM, 19:05:00 |
| medium | 19:05:00 PM, 19:05:00 |
| short | 19:05 PM, 19:05 |
Vous pouvez utiliser la propriété format pour définir explicitement un format de date tokenisé. Un format de jeton 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 interface avec le 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 n'affiche que 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 taper leur date, votre format doit inclure au moins un jeton de mois, de jour et d'année.
| Jeton | Exemples | Description |
|---|---|---|
YY | 99, 23, 00 | Année à 2 chiffres |
YYYY | 1999, 2023, 2100 | Année à 4 chiffres |
M | 1, 12 | Le mois 1-12 |
MM | 01, 12 | Le mois 01-12 |
MMM | Jan, Fév | Nom court Jan-Déc |
MMMM | Janvier, Février | Nom complet Janvier - Décembre |
D | 1, 9, 22 | Le jour du mois 1-31 |
DD | 01, 09, 22 | Le jour du mois 01-31 |
d | L, M, M, J, V, S, D | Jour à un chiffre "M" |
ddd | Jeu, Sam | Nom court du jour "Jeu" |
dddd | Lundi, Mardi | Nom complet du jour "Mercredi" |
H | 0, 13, 23 | Heure minimum, 24 heures, 0-23 |
HH | 00, 13, 23 | 2 chiffres pour l'heure, 24 heures, 00-23 |
h | 12, 1, 11 | Heure minimum, horloge 12 heures, 1-12 |
hh | 12, 01, 11 | 2 chiffres pour l'heure, horloge 12 heures, 01-12 |
m | 1, 59 | La minute 0-59 |
mm | 01, 59 | La minute 00-59 |
s | 1, 59 | La seconde 0-59 |
ss | 01, 59 | La seconde 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 nombreuses locales.
Pour inclure des lettres dans votre format qui sont elles-mêmes des tokens (comme a), vous pouvez échapper ces tokens avec un backslash \ avant le caractère :
Le popup du calendrier du datepicker a quatre "panneaux" :
day — Affiche une vue traditionnelle du calendrier d'un mois avec chaque jour sélectionnable.month — Affiche les 12 mois de l'année.year — Affiche une décennie d'années à la fois.time — Affiche l'heure du jour.Lorsqu'un utilisateur ouvre le popup du datepicker, il lui sera montré un ou plusieurs de ces panneaux. Vous pouvez modifier quels panneaux sont affichés à l'utilisateur et la séquence dans laquelle ces panneaux doivent être affichés en fournissant une prop sequence. La valeur sequence par défaut est ['day'] (ce qui vous permet de naviguer vers les panneaux month et year).
Par exemple, lors de la sélection d'une date de naissance, il est naturel de sélectionner d'abord l'année de naissance, puis le mois, puis le jour. La prop 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 ISO8601 normalisée en UTC (exemple : 2014-11-27T03:59:00.000Z). Cependant, ce format peut être modifié pour n'importe lequel des styles de date supportés ou des formats de token listés ci-dessus en utilisant la prop value-format.
Une question valide est pourquoi ne pas toujours utiliser ISO8601 ? Bien que ce soit la façon 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, il suffit de passer 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 datepicker 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 datepicker, ils seront immédiatement transformés dans le value-format spécifié.
value-formatDate nativeComme le format de la valeur doit être analysé en utilisant la même locale avec laquelle il a été créé, il est recommandé de toujours spécifier la value-locale lors de la définition d'un value-format personnalisé. Cela garantit que quelle que soit la locale de l'utilisateur qui entre la date, la valeur restera cohérente :
Changer la value-locale n'a aucun effet sur le timezone de la date choisie. Voir la documentation sur les fuseaux horaires ci-dessous pour plus d'explications.
Le temps est notoirement difficile à gérer dans n'importe quel environnement logiciel, mais surtout en JavaScript basé sur un navigateur. Le datepicker propose quelques options pour aider à contourner 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 timestamp 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 en 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 :
Lors de l'utilisation de jetons value-format dans le datepicker, 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 en considération 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 leur voyage (alors qu'ils sont dans leur pays d'origine).
Le sélecteur de date, par défaut, demandera au touriste la date et l'heure de leur réservation souhaitée — mais (par défaut) la sélection sera leur heure locale, pas l'heure à Amsterdam. Même si le value-format sort en UTC, l'heure ne sera pas l'heure de réservation prévue à Amsterdam (à moins qu'ils ne se trouvent dans le même fuseau horaire).
En général, il y a 2 solutions à ce problème :
Utilisez 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 horodatage Unix sous-jacent. Par exemple, 14h le 13 mars n'est pas en UTC et n'a pas de décalage explicite. 14h le 13 mars décrit une heure spécifique à un endroit/fuseau horaire indéterminé. Vous pouvez le faire avec des jetons de format 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'attacher 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 requiert 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 devient "l'heure d'Amsterdam" (ce décalage varie en fonction de l'heure de l'année en raison de l'heure d'été à Europe/Amsterdam).
timezone du sélecteur de dateAlternativement, la propriété timezone du sélecteur de date effectuera la correction du 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'ils sélectionnent sera dans le fuseau horaire cible. Un utilisateur à America/New_York (+0400) qui sélectionne 14h le 13 mars dans son sélecteur de date, donnera une valeur UTC de 2023-03-13T13:00:00Z qui est 14h à Amsterdam. Cela permet un stockage et une hydratation simples de 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 faite. 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 ISO8601 normalisée en UTC. 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 à un fuseau horaire donné.
Par exemple, lorsque vous réglez une alarme sur votre téléphone pour 8:00 AM — 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 à 8:00 AM à Tokyo de la même manière qu'elle sonnerait à 8:00 AM à 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 cette information. Les jetons dans un value-format sortent toujours des valeurs locales du client — donc en laissant toute donnée de fuseau horaire ou de décalage (Z) hors de la valeur, 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 difficile. Pour aider à soulager cette difficulté, le datepicker prend en charge la possibilité de spécifier explicitement le fuseau horaire de l'entrée.
La propriété fuseau horaire vous permet de spécifier la "localisation" du datepicker en fonction des fuseaux horaires IANA pris en charge par le navigateur. C'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 d'utilisation :
Il y a beaucoup de moments où le fuseau horaire ne devrait pas être utilisé (par défaut à l'heure 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. Ils aimeraient récupérer la voiture 45 minutes plus tard à 14h30. Ces faits sont vrais peu importe où dans le monde l'utilisateur réserve le voyage. Dans ce cas, nous devrions régler le fuseau horaire sur Asia/Kolkata. Le décalage à Kolkata est de +5:30 - 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 car FormKit n'a pas besoin d'envoyer la (assez vaste) base de données de 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 facilement polyfillées en utilisant polyfill.io avec Intl.DateTimeFormat.~timeZone.all.
Il est souvent nécessaire de désactiver des dates spécifiques dans le datepicker. Il existe trois façons de désactiver des dates dans le datepicker :
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 datepicker, cependant une date non disponible peut toujours être définie comme valeur initiale ou en la tapant dans l'entrée (lorsqu'elle n'est pas en mode picker-only). Pour gérer ces cas particuliers, le datepicker dispose d'une règle de validation intégrée (qui ne peut pas être désactivée) qui garantit que seules des 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 ce faire, 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 autoriser que les dates passées. Pour ce faire, 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 aux seules années valides lors de l'utilisation de la saisie de texte.
Souvent, nos applications nécessitent une granularité beaucoup plus importante lors de la désactivation des dates que ne le permettent min-date et max-date. Le datepicker permet 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 noyau du noeud et un objet Date. La fonction a pour responsabilité de retourner un booléen indiquant si la date est désactivée (true est désactivé).
La propriété disabled-days supplante 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 devez récupérer des informations à partir d'une base de données, faites-le en dehors de cette fonction et utilisez cette fonction pour accéder aux résultats mémorisés.
Lors de la navigation dans le calendrier pop-up via le clavier, le datepicker 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 datepicker balayera automatiquement vers l'avant ou vers l'arrière (selon la direction souhaitée) pour trouver la prochaine date disponible à sélectionner. Le nombre maximum de jours à balayer pour trouver un jour disponible est contrôlé par la propriété maxScan (7 jours par défaut) :
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| date-format | string | D | Le format de token à 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 central 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'input de sélection. |
| max-date | Date | ISO8601 | none | La date maximale que l'utilisateur est autorisé à sélectionner. |
| max-scan | number | 7 | Le nombre maximal 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 ancienne que l'utilisateur est autorisé à sélectionner. |
| month-button-format | string | MMMM | Le format de date à utiliser pour le bouton du panneau du mois dans le popup du calendrier. |
| month-format | string | MMMM | Le format de date à utiliser pour chacun des 12 mois sur le panneau du mois. |
| overlay | boolean | false | Indique si un masque overlay doit être affiché ou non. En savoir plus sur les overlays dans la documentation de l'input de masque (n'a aucun effet en mode `pickerOnly`). |
| picker-only | boolean | false | Indique si la date peut être entrée via un input de texte. Lorsque picker-only est activé, seul le picker 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 par l'utilisateur lorsqu'il ouvre la vue du calendrier du datepicker. Les options sont `year`, `month`, `day`, `time`. |
| value-format | string/object | ISO8601 | Le format à enregistrer comme valeur de l'input. Cela peut être composé avec n'importe quel format de token, style de date, ou `ISO8601`. |
| value-locale | string | `node.props.locale` | La locale à utiliser pour le `valueFormat`. Lors de l'utilisation de tokens de format dans la prop `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. |
| week-day-format | string | d | Le format de date utilisé pour rendre les en-têtes de colonne du jour de la semaine. |
| year-format | string | YYYY | Le format de date utilisé pour rendre les années dans le panneau `year`. |
| 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 d'entrée à l'intérieur de la section inner lorsque la fenêtre contextuelle du datepicker est ouverte.
Le panneau apparaît sous l'élément d'entrée à l'intérieur de la section inner lorsque la fenêtre contextuelle du datepicker est ouverte.
Le panneau apparaît sous l'élément d'entrée à l'intérieur de la section inner lorsque la fenêtre contextuelle du datepicker est ouverte.
Le panneau apparaît sous l'élément d'entrée à l'intérieur de la section inner lorsque la fenêtre contextuelle du datepicker est ouverte.
| Section-key | Description |
|---|---|
| calendar | L'enveloppe immédiatement 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édiatement 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 cette fente/section, vous pouvez utiliser context.day ($day dans le schéma) pour obtenir l'objet de 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édiatement autour de la section de la date. Dans cette fente/section, vous pouvez utiliser context.day ($day dans le schéma) pour obtenir l'objet de 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 de mois réels sur le panneau du mois. Dans cette fente/section, vous pouvez utiliser context.month ($month dans le schéma) pour obtenir l'objet de 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édiatement autour des sections du mois sur le panneau du mois. |
| monthsHeader | L'enveloppe immédiatement 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. |
| 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 se trouve dans l'entrée de texte pendant le mode d'entrée 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 la 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 sous le panelHeader 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. Ceci est un frère de la section du panneau. |
| panelWrapper | Une enveloppe autour des sections du panneau et du panelHeader, 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 entrée HTML native time 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 enveloppe autour des jours de la semaine sur l'en-tête du calendrier sur le 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'il 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. |