Datepicker

Campo per selezionare una data all'interno di un calendario

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Utilizza il componente Datepicker, nel contesto di un modulo (Form), quando gli utenti hanno bisogno di selezionare una data all'interno di un calendario, ad esempio per prenotare un appuntamento o cercare un evento.

Alternative

  • Nel caso di date familiari agli utenti, come la data di nascita, e quando non è importante sapere il giorno della settimana, puoi usare il componente input per il mese e il giorno in formato numerico e il componente select per l'anno.

Come usarlo

  • Permetti agli utenti di inserire una data manualmente.
  • Permetti agli utenti di sfogliare i mesi utilizzando le frecce presenti nel calendario.
  • Usa preferibilmente il calendario aperto nella forma nativa offerta da ciascun browser, per garantirne il pieno supporto.

Attenzione a

  • Fornire il suggerimento del formato gg/mm/aaaa per aiutare gli utenti a inserire correttamente una data se scelgono di non utilizzare la selezione a calendario.
  • Validare il funzionamento con tastiera e tecnologie assistive.
  • Gestire correttamente eventuali microtesti con messaggi di errore.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Da verificare

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Da verificare

Struttura titolazioni, etichette e testi alternativi

Navigabile

Da verificare

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Da verificare

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

Anatomia

Gli elementi che formano il datepicker

Il componente datepicker è basato sul componente input e ne condivide la maggior parte degli elementi.

È composto da:

  1. forma di sfondo: è sempre di colore bianco con un bordo sul lato inferiore;
  2. etichetta: posizionata all'esterno della forma di sfondo, in alto;
  3. icona (opzionale): indica la presenza del calendario, non è cliccabile separatamente;
  4. testo placeholder: suggerisce il formato testuale da usare per compilare correttamente il campo;
  5. testo di supporto (opzionale): fornisce eventuali indicazioni aggiuntive.

Comportamento

Una volta selezionata la data, il calendario si chiude e la data selezionata viene mostrata nel campo.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Specifiche di design del datepicker

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici