# j-Properties2 > Le composant utilise les composants j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker et j-Icons. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: fr Content-SHA256: 3d5de7a88ef4002c0578b8128fa9577f17620039931c4efb80e4c56b0a07c3e4 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Le composant utilise les composants `j-DatePicker`, `j-TimePicker`, `j-Directory`, `j-Emoji`, `j-ColorPicker` et `j-Icons`. __Configuration__ : - `dateformat {String}` un format de date (par défaut : `yyyy-MM-dd`) - `timeformat {String}` Un format de temps (defaut) : `HH:mm`) - `datetimeformat {String}` un format date/heure (par défaut : `yyyy-MM-dd HH:mm`) - `change {String}` est un chemin vers la méthode `method(item, replace_text(new_text))` (exécuté si une valeur est modifiée) et le argument `replace_text` est facultatif - `modalalign {String}` pour les fenêtres modales (defaut: `center`) - `style {Number}` prend en charge un nouveau style `2` comme les paramètres `iOS` (defaut: `1`) - `validation {Boolean}` permet la validation pour les champs requis (defaut: `true`) - `defaultgroup {String}` un nom de groupe par défaut (par défaut : `Default`) __Déclaration de données__ : ```javascript var form = []; form.push({ group: 'Personal', label: 'First name', name: 'user.firstname', type: 'string', value: 'Peter', transform: 'capitalize' }); form.push({ group: 'Personal', label: 'Last name', name: 'user.lastname', type: 'string', value: 'Širka', placeholder: 'String' }); form.push({ group: 'Personal', label: 'Age', name: 'user.age', type: 'number', value: 33, min: 30 }); form.push({ group: 'Personal', label: 'Birth date', name: 'user.birth', type: 'date', value: NOW }); form.push({ group: 'Additional', label: 'Newsletter', name: 'user.newsletter', type: 'bool', value: true }); form.push({ group: 'Additional', label: 'City', name: 'user.city', type: 'list', value: 2, items: 'items', dirsearch: 'Search city', dircustom: true }); form.push({ group: 'Additional', label: 'Color', name: 'user.color', type: 'color', value: '#e73323' }); form.push({ group: 'Additional', label: 'Icon', name: 'user.icon', type: 'fontawesome', value: 'ti ti-home' }); form.push({ group: 'Additional', label: 'Emoji', name: 'user.emoji', type: 'emoji', value: '', show: 'n => n.age === 33' }); ``` __Propriétés de données dans la déclaration des données__: - `name {String}` un identifiant d'objet (exigé) - `label {String}` un étiquette (exigeant) - `group {String}` un nom de groupe (exigeant) - `note {String}` : une petite note sous contrôle - `type {String}` un type (exigeant) - `placeholder {String}` un locataire (soutenir quelques types uniquement) - `transform {String}` pour le type `string` seulement, peut contenir `capitalize`, `uppercase`, `lowercase` ou `slug` - `maxlength {Number}` pour le type `string` seulement - `validate {RegExp/String}` pour le type `string`, peut contenir `email`, `phone` ou `url` - `min {Number}` pour le type `number` seulement - `max {Number}` pour le type `number` seulement - `inc {Number/String}` augmenter une valeur selon la valeur, ciblée pour `number` ou `date` (Pour contenir `1 day` ou `-1 day`Le type uniquement - `required {Boolean}` pour le type `string`, `number` ou `date` - `dirsearch {String/Boolean}` un locataire pour le type `list` seulement, boolean désactive la recherche - `dircustom {Boolean}` permet une valeur personnalisée pour le type `list` uniquement - `dirkey {String}` un nom clé pour l'étiquette/nom, ciblé uniquement pour le type `list` (defaut: `name`) - `dirvalue {String}` un nom clé pour la valeur, ciblé uniquement pour le type `list` (defaut: `id`) - L'adresse URL `detail {String}` pour obtenir des données pour le type `list`, par exemple: `/users/{0}/` et `{0}` seront remplacés par la valeur de la liste - Les éléments `items {Object Array/String}` pour le type `list` uniquement, les lignes peuvent contenir un chemin vers `Array` ou `URL address` à rechercher - `show {Arrow function}`, exemple: `data => data.KEY === 'SOMETHING'` --> affichera l'élément si la condition sera valide - L'icône total de `icon {String}` peut contenir une couleur, par exemple `ti ti-home #00000` - `ricon {String}` Icône ou texte de la bonne phrase, par exemple `!HTML text` - `riconclick {String}` : un chemin vers la méthode `function(item, set(new_val))`. - `camouflage {Boolean}` seulement pour le type `string` - `monospace {Boolean}` Il utilise un font monospacifique __Les types autorisés dans les données__: - `string` - `bool` - `number` - `date` - `list` - `color` - `emoji` - `fontawesome` - `exec` (pour exécuter la méthode `exec`) - `text` (valeur de lecture) - `menu` (il est similaire à la liste mais le composant exécute `j-Menu`) __Les types manquants__: - `datetime` - `time` - `file` - `months` ### Bon à savoir Le composant étend l'Array en ajoutant : - Le champ `invalid {Boolean}` détermine si le `value` est invalide (defaut: `undefined`) - Le champ `changed {Boolean}` détermine si le `value` a été modifié (défaut: `undefined`) - Le champ `prev` contient une valeur initiale Utilisez-le avec ``. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT. ```html example.html
```