Forms

DateTimePicker

Input combinato data e ora con popup che integra un Calendar e un Clock compatto. Il valore e sempre in formato ISO 8601 YYYY-MM-DDTHH:MM.

Import

import { DateTimePicker } from '@pzeta/vue-components'

Il valore e una stringa in formato ISO 8601: YYYY-MM-DDTHH:MM (es. "2025-12-31T14:30"). L'input visualizza il formato localizzato DD/MM/YYYY HH:MM. Il popup contiene un Calendar nella parte superiore e un Clock compatto in basso. La selezione viene applicata solo al click su Conferma.

Formato Valore

Direzione	Formato
`modelValue` in ingresso	`YYYY-MM-DDTHH:MM` o `undefined`/`null`
`update:modelValue` in uscita	`YYYY-MM-DDTHH:MM` o `null`
Visualizzato all'utente	`DD/MM/YYYY HH:MM`

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string`	—	Valore corrente in formato ISO 8601 (v-model)
`defaultValue`	`string \| null`	—	Valore iniziale non controllato
`label`	`string`	—	Label del campo
`placeholder`	`string`	locale	Testo placeholder (default da i18n)
`helperText`	`string`	—	Testo di aiuto sotto il campo
`error`	`string`	—	Messaggio di errore
`disabled`	`boolean`	`false`	Disabilita il componente
`readonly`	`boolean`	`false`	Sola lettura
`loading`	`boolean`	`false`	Mostra spinner di caricamento
`required`	`boolean`	`false`	Campo obbligatorio
`invalid`	`boolean`	`false`	Forza stato errore
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione dell'input
`severity`	`Severity`	`'primary'`	Colore del tema
`variant`	`'outlined' \| 'filled'`	`'outlined'`	Variante visiva
`fluid`	`boolean`	`false`	Adatta la larghezza al contenitore
`rounded`	`boolean`	`false`	Bordi arrotondati
`showClear`	`boolean`	`false`	Mostra pulsante di svuotamento
`showIcon`	`boolean`	`true`	Mostra icona calendario
`iconDisplay`	`'button' \| 'input'`	`'button'`	Posizione icona: suffix button o prefix input
`manualInput`	`boolean`	`true`	Permette la digitazione manuale
`min`	`string`	—	Valore minimo in formato ISO
`max`	`string`	—	Valore massimo in formato ISO
`prefixIcon`	`string`	—	Classe icona prefix
`suffixIcon`	`string`	—	Classe icona suffix
`clearIcon`	`string`	config	Classe icona clear (override config)
`loadingIcon`	`string`	config	Classe icona loading (override config)
`inputId`	`string`	auto	ID dell'elemento input
`inputClass`	`string \| null`	—	Classe CSS aggiuntiva
`inputStyle`	`string \| Record<string, string \| number> \| null`	—	Stile inline per l'input
`name`	`string`	—	Nome del campo per form submission
`autofocus`	`boolean`	`false`	Focus automatico al mount
`minDate`	`Date \| null`	—	Data minima selezionabile
`maxDate`	`Date \| null`	—	Data massima selezionabile
`disabledDates`	`Date[] \| null`	—	Date disabilitate
`disabledDays`	`number[] \| null`	—	Giorni della settimana disabilitati (0=Dom, 6=Sab)
`showQuickOptions`	`boolean`	`false`	Mostra opzioni rapide nel calendario
`quickOptions`	`CalendarQuickOption[]`	—	Opzioni rapide personalizzate
`firstDayOfWeek`	`number`	locale	Primo giorno settimana (0=Dom, 1=Lun)
`showWeekNumbers`	`boolean`	`false`	Mostra numeri di settimana
`minTime`	`string`	—	Ora minima selezionabile nel Clock (es. `'08:00'`)
`maxTime`	`string`	—	Ora massima selezionabile nel Clock (es. `'20:00'`)
`precision`	`1 \| 5 \| 10 \| 15 \| 30 \| 60`	`5`	Precisione minuti nel Clock
`separator`	`string`	`':'`	Separatore ore:minuti nel Clock
`clockI18n`	`ClockI18n`	—	Testi localizzati per il Clock
`showClockHeader`	`boolean`	`false`	Mostra header con orario nel Clock

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Aggiornamento valore (v-model) — emesso alla conferma
`input`	`{ originalEvent: Event; value: string \| null }`	Cambio durante digitazione
`change`	`{ originalEvent: Event; value: string \| null }`	Cambio valore confermato
`focus`	`FocusEvent`	Focus sull'input
`blur`	`FocusEvent`	Blur dall'input
`keydown`	`KeyboardEvent`	Tasto premuto
`keyup`	`KeyboardEvent`	Tasto rilasciato
`keypress`	`KeyboardEvent`	Tasto premuto (keypress)
`clear`	`MouseEvent`	Click sul pulsante clear
`dateSelect`	`Date`	Data selezionata nel calendario (pre-conferma)
`timeChange`	`string`	Ora cambiata nel Clock (pre-conferma)
`monthChange`	`{ month: number; year: number }`	Cambio mese nella navigazione
`beforeShow`	—	Prima dell'apertura popup
`show`	—	Popup aperto
`beforeHide`	—	Prima della chiusura popup
`hide`	—	Popup chiuso
`confirm`	`string \| null`	Conferma selezione — valore finale in ISO 8601
`cancel`	—	Annullamento — valori ripristinati

Esempi

Con limiti data/ora

<DateTimePicker
  v-model="meetingDateTime"
  label="Meeting"
  :min="new Date().toISOString().slice(0, 16)"
  min-time="08:00"
  max-time="18:00"
/>

Con precisione minuti personalizzata

Con pulsante clear

<DateTimePicker
  v-model="dateTimeValue"
  label="Data e Ora"
  show-clear
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

I pulsanti Conferma/Annulla sono sempre visibili nel popup DateTimePicker. Il valore viene aggiornato solo alla conferma. Al cancel, i valori precedenti vengono ripristinati.

Metodi Esposti

Metodo	Descrizione
`focus()`	Porta il focus sull'input
`blur()`	Rimuove il focus dall'input
`select()`	Seleziona il testo nell'input
`open()`	Apre il popup
`close()`	Chiude il popup
`toggle()`	Alterna apertura/chiusura del popup

Accessibilita

Input associato alla label tramite id auto-generato o inputId
Il popup si chiude con Escape
Si apre con Enter quando l'input ha il focus

TypeScript

import type { DateTimePickerProps, CalendarQuickOption } from '@pzeta/vue-components'

// Formato ISO 8601: YYYY-MM-DDTHH:MM
const dateTimeValue = ref<string>('')

function handleConfirm(value: string | null) {
  if (value) {
    // value e gia in formato YYYY-MM-DDTHH:MM
    console.log('Confermato:', value)
  }
}

DatePicker

Input data con calendario popup e auto-completamento intelligente. Supporta selezione singola, multipla e a intervallo, opzioni rapide e bottoni di conferma.

FileUpload

Componente upload file con selezione tramite click o drag-and-drop, validazione dimensione e tipo, preview immagini e gestione lista file selezionati.