# j-Properties2 > Il componente utilizza i componenti j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker e j-Icons. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: it Content-SHA256: 80fc18e7ca703f70df4afda68957a26fd867e2d6f5f08943a961fef3c060f5fb Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Il componente utilizza i componenti `j-DatePicker`, `j-TimePicker`, `j-Directory`, `j-Emoji`, `j-ColorPicker` e `j-Icons`. __Configurazione__: - `dateformat {String}` formato di data (default: `yyyy-MM-dd`) - `timeformat {String}` in formato temporale (default: `HH:mm`) - `datetimeformat {String}` formato data/ora (default: `yyyy-MM-dd HH:mm`) - `change {String}` un percorso per il metodo `method(item, replace_text(new_text))` (eseguito se un valore è cambiato) e argomento `replace_text` è opzionale - Allegamento `modalalign {String}` per le finestre modali (default: `center`) - `style {Number}` supporta un nuovo stile `2` come le impostazioni `iOS` (default: `1`) - `validation {Boolean}` consente la validazione per i campi richiesti (default: `true`) - `defaultgroup {String}` un nome di gruppo predefinito (predefinita: `Default`) __Dichiarazione dati__: ```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' }); ``` __Proprietà dei dati nella dichiarazione dei dati__: - `name {String}` un identificatore di oggetto (necessario) - `label {String}` un’etichetta (necessaria) - `group {String}` un nome di gruppo (necessario) - `note {String}`: una piccola nota sotto controllo - `type {String}` un tipo (necessario) - `placeholder {String}` per un locatore (sopporta solo pochi tipi) - `transform {String}` per il tipo `string`, può contenere `capitalize`, `uppercase`, `lowercase` o `slug` - `maxlength {Number}` per il tipo `string` solo - `validate {RegExp/String}` per il tipo `string`, può contenere `email`, `phone` o `url` - `min {Number}` per il tipo `number` solo - `max {Number}` per il tipo `number` solo - `inc {Number/String}` un valore aumentato in base al valore, mirato a `number` o `date` ( può contenere `1 day` o `-1 day`Il tipo solo - `required {Boolean}` per il tipo `string`, `number` o `date` - `dirsearch {String/Boolean}` un locatore per il tipo `list` solo, boolean disabilita la ricerca - `dircustom {Boolean}` consente un valore personalizzato per il tipo `list` solo - `dirkey {String}` un nome chiave per etichetta/nome, mirato solo per il tipo `list` (default: `name`) - `dirvalue {String}` è un nome chiave per il valore, mirato solo al tipo `list` (default: `id`) - L'indirizzo URL `detail {String}` per l'ottenimento di dati per il tipo `list`, esempio: `/users/{0}/` e `{0}` saranno sostituiti con il valore della lista - Gli articoli `items {Object Array/String}` per il tipo `list` possono contenere un percorso a `Array` o `URL address` per cercare - `show {Arrow function}`, esempio: `data => data.KEY === 'SOMETHING'` --> mostrerà l'articolo se la condizione sarà valida - `icon {String}` Icon totale, può contenere un colore per esempio `ti ti-home #00000` - `ricon {String}` Icone di font destra o testo ecc. `!HTML text` - `riconclick {String}` un percorso verso il metodo `function(item, set(new_val))` - `camouflage {Boolean}` solo per il tipo `string` - `monospace {Boolean}` utilizza una font monospaziale __I tipi consentiti nei dati__: - `string` - `bool` - `number` - `date` - `list` - `color` - `emoji` - `fontawesome` - `exec` (per eseguire il metodo `exec`) - `text` (valutazione del valore) - `menu` (è simile alla lista ma il componente eseguirà `j-Menu`) __Tipi scomparsi__: - `datetime` - `time` - `file` - `months` ### Buono sapere Il componente estende l'Array aggiungendo: - Il campo `invalid {Boolean}` determina se il `value` è invalido (default: `undefined`) - Il campo `changed {Boolean}` determina se il `value` è stato modificato (default: `undefined`) - Il campo `prev` contiene un valore iniziale Utilizzare con ``Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT. ```html example.html
```