Input
Questo componente permette l’inserimento di: testo, numeri, orari e date con la possibilità di abbinare un pulsante di invio/conferma.
Input / text field
Text field / Standard
Text field / Standard con Placeholder
Text field / Standard con Label extra testo di aiuto
Ulteriore testo informativo
Ulteriore testo informativo
Text field / Input con Icona
Text field / Input con Pulsante
Text field / con Autocomplete
Ulteriore testo informativo
Ulteriore testo informativo
Text field / Standard [Disabilitato]
Date field / Datepicker
All'attributo data-sil-mindate e data-sil-maxdate è possibile passare un range di date passibili
Nell'esempio 2018-12-01 per mindate e 2022-12-05 per maxdate.
In data-sil-select è possibile passare una data specifica al datepicker ('2019-02-14' nell'esempio, today/data odierna di default)
Campo date nativo
Inserire una data
Campo date con datepicker custom
Inserire una data
Inserire una data
Inserire una data
Time field / Timepicker
Inserire orario
Inserire orario
Input / Password
Inserisci almeno 8 caratteri e una lettera maiuscola
Inserisci almeno 8 caratteri e una lettera maiuscola
Indicatore forza password
CAPS LOCK inserito
Input / Password / Variante con Icona della Chiave
Inserisci almeno 8 caratteri e una lettera maiuscola
Text field / Standard tipo Number
Semplice
Con la Label e il testo di aiuto
Ulteriore testo informativo
Ulteriore testo informativo
Text field tipo Numero specifici: Valuta e Percentuale
Valuta / Currency
Ulteriore testo informativo
Percentuale / Percentage
Ulteriore testo informativo
Ulteriore testo informativo
Ulteriore testo informativo
Text area / Area di testo
Caratteri digitati: 0/500
Caratteri digitati: 0/500
Validazione Input
Text field / Success
Classe
.just-validate-success-field
Text field / Warning
Classe
.has-warning
Text field / Error
Classe
.is-invalid
Input / con Autocomplete
All'attributo data-sil-has-i-autocomplete è possibile passare l'endpoint per il fetch degli eventi.
Per motivi tecnici, nell'esempio sottostante vengono chiamati dei JSON locali.
Ulteriore testo informativo
Tryout Init / Update
Ulteriore testo informativo
// Init - Può essere inizializzato passando un path per il fetch (come da snippet HTML)
const autocomplete = new SILAutocomplete(document.querySelector('[data-sil-has-i-autocomplete]'))
autocomplete.init
// OPPURE passando un JSON come secondo argomento
const autocomplete = new SILAutocomplete(document.querySelector('[data-sil-has-i-autocomplete]'), {
"data": [
{
"id": 0,
"title": "Cagliari"
},
{
"id": 1,
"title": "Alghero"
},
{
"id": 2,
"title": "Oristano"
},
{
"id": 3,
"title": "Olbia"
},
{
"id": 4,
"title": "Sassari"
},
{
"id": 5,
"title": "Nuoro"
},
{
"id": 6,
"title": "Carbonia"
},
{
"id": 7,
"title": "Iglesias"
},
{
"id": 8,
"title": "Quartu Sant'Elena"
},
{
"id": 9,
"title": "Assemini"
},
{
"id": 10,
"title": "Selargius"
},
{
"id": 11,
"title": "Cagliari 2"
},
{
"id": 12,
"title": "Cagliari 3"
},
{
"id": 13,
"title": "Cagliari 4"
},
{
"id": 14,
"title": "Cagliari 5"
},
{
"id": 15,
"title": "Cagliari 6"
},
{
"id": 16,
"title": "Cagliari 7"
},
{
"id": 17,
"title": "Cagliari 8"
},
{
"id": 18,
"title": "Cagliari 9"
},
{
"id": 19,
"title": "Cagliari 10"
},
{
"id": 20,
"title": "Cagliari 11"
},
{
"id": 21,
"title": "Cagliari 12"
},
{
"id": 22,
"title": "Cagliari 13"
},
{
"id": 23,
"title": "Cagliari 14"
},
{
"id": 24,
"title": "Cagliari 15"
}
]
})
autocompleteData.init
// Pulisce l'input
autocomplete.clean
// Ottenere Item selezionato
autocomplete.selectedOption
// Ottenere oggetto dell'Item selezionato
autocomplete.selectedObject
// Callback su change
autocomplete.callback = function (e) {
console.log("Callback al change", e.target)
}
{
"data": [
{
"id": 0,
"title": "Cagliari"
},
{
"id": 1,
"title": "Alghero"
},
{
"id": 2,
"title": "Oristano"
},
{
"id": 3,
"title": "Olbia"
},
{
"id": 4,
"title": "Sassari"
},
{
"id": 5,
"title": "Nuoro"
},
{
"id": 6,
"title": "Carbonia"
},
{
"id": 7,
"title": "Iglesias"
},
{
"id": 8,
"title": "Quartu Sant'Elena"
},
{
"id": 9,
"title": "Assemini"
},
{
"id": 10,
"title": "Selargius"
},
{
"id": 11,
"title": "Cagliari 2"
},
{
"id": 12,
"title": "Cagliari 3"
},
{
"id": 13,
"title": "Cagliari 4"
},
{
"id": 14,
"title": "Cagliari 5"
},
{
"id": 15,
"title": "Cagliari 6"
},
{
"id": 16,
"title": "Cagliari 7"
},
{
"id": 17,
"title": "Cagliari 8"
},
{
"id": 18,
"title": "Cagliari 9"
},
{
"id": 19,
"title": "Cagliari 10"
},
{
"id": 20,
"title": "Cagliari 11"
},
{
"id": 21,
"title": "Cagliari 12"
},
{
"id": 22,
"title": "Cagliari 13"
},
{
"id": 23,
"title": "Cagliari 14"
},
{
"id": 24,
"title": "Cagliari 15"
}
]
}
Input / con l'aggiunta dei campi
Il caso in particolare "Voci di spesa".
* Massimo 250 caratteri
* Massimo 250 caratteri
// HTMLElement
const element = document.querySelector('.has-fields-add-and-rmv');
// Init
const initInputField = new SILInputFieldAddAndRmv(element);
initInputField.init;