Date Picker

Panoramica

Il componente DatePicker è un input per le date, basato su MobileDatePicker di Material-UI (Mui X); utilizza l'adapter Luxon.

Importazione

import { DatePicker } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
views	DateView[]	no	["year", "month", "day"]	Per decidere quali "proprietà" mostrare nel selettore (giorno/mese/anno).
name	string	no	undefined	Attributo name del campo, utile per i form.
showResetButton	boolean	no	false	Mostra il pulsante per resettare la selezione.
value	DateTime | null	no	undefined	Data selezionata.
onChangeValue	(value: DateTime | null) => void	no	undefined	Funzione chiamata al cambio valore.
label	string	no	undefined	Etichetta visualizzata sopra il campo.
isDisabled	boolean	no	false	Disabilita la selezione della data.
isFullWidth	boolean	no	false	Se true, occupa il 100% della larghezza disponibile.
required	boolean	no	false	Se true, il campo diventa obbligatorio.

Esempi di utilizzo

Selettore di data base

<DatePicker label="Data di nascita" value={value} onChangeValue={setValue} required />

Selettore con viste personalizzate

<DatePicker label="Mese e Anno" views={["year", "month"]} value={value} onChangeValue={setValue} />

Selettore con pulsante di reset

<DatePicker label="Data evento" showResetButton selectedValue={value} value={value} onChangeValue={setValue} />

Comportamento

• Mostra automaticamente il formato di data corretto in base alle viste selezionate.
• Mostra un messaggio di errore se required è true e il valore non è selezionato.
• Il pulsante di reset è visibile solo se showResetButton è true, selectedValue è valorizzato e isDisabled è false.
• La localizzazione è completamente in italiano.

Note aggiuntive

• Utilizza AdapterLuxon come sistema di date, quindi i valori devono essere oggetti DateTime di Luxon.

---