Le date

Per inserire un campo che preveda l'inserimento di una data durante la compilazione della pratica, trascina dall'elenco il componente "Textfield".

Sconsigliamo di usare il componente standard "Date / Time" di form.io: dal punto di vista grafico è poco curato e, se affiancato ad altri campi (ad esempio dentro un Datagrid o un Columns), le etichette dei campi risultano schiacciate. Un Textfield con formato data, configurato come spiegato di seguito, garantisce lo stesso risultato con una resa visiva coerente con gli altri componenti.

Configurare le date

Nella sezione "Display" del componente, alla voce "Widget" puoi scegliere tra due modalità di inserimento.

Widget: Input field

Il cittadino compila liberamente la data, guidato dalla maschera di inserimento. Imposta in "Input mask" il valore 99/99/9999 e come placeholder gg/mm/aaaa.

Widget: Calendar picker

Il cittadino seleziona la data da un calendario visuale, invece di digitarla. Il campo resta un Textfield, cambia solo la modalità di inserimento.

Di default, il widget salva sia la data sia l'orario. Se vuoi che salvi solo la data, senza orario, vai in "Widget Settings" e modifica i seguenti valori:

{
  "enableTime": false,
  "format": "dd/MM/yyyy",
  "dateFormat": "dd/MM/yyyy"
}

Nella sezione "Validation" del componente, apri la voce "Custom validation" e inserisci il codice JavaScript appropriato in base al caso d'uso.

Nell'immagine viene mostrata la configurazione del caso d'uso "Data nel passato"

Esempi di validazione delle date

Di seguito trovi alcuni casi d'uso che puoi riutilizzare per la validazione delle date.

Data nel passato

Controlla che la data inserita sia valida e non sia nel futuro (utile ad esempio per date di nascita o eventi già avvenuti).

date = moment(input, 'DD/MM/YYYY');
if (!date.isValid()){
  valid = "La data inserita non è valida";
}
if (date.isAfter(moment())){
  valid = "La data inserita deve essere nel passato";
}

Data nel futuro

Controlla che la data inserita sia valida e non sia nel passato (utile ad esempio per date di appuntamento o eventi futuri).

date = moment(input, 'DD/MM/YYYY');
if (!date.isValid()){
  valid = "La data inserita non è valida";
}
if (date.isBefore(moment())){
  valid = "La data inserita deve essere nel fututo";
}

Confronto tra due date

Controlla che la seconda data (ad esempio la data di fine) sia uguale o successiva alla prima (ad esempio la data di inizio). Sostituisci initial_date con la chiave API del campo data di inizio.

passedDate = moment(input, 'DD/MM/YYYY');
initialDate = moment(data.initial_date, 'DD/MM/YYYY');
if (!passedDate.isValid()) {
  valid = "La data inserita non è valida";
} else if (!initialDate.isValid()) {
  valid = "Inserisci prima la data di inizio";
} else if (passedDate.isBefore(initialDate, 'day')) {
  valid = "La data inserita non può precedere la data di inizio";
} else {
  valid = true;
}