Forms

TimePicker

Input orario con popup Clock picker analogico o compatto. Supporta formato 24h, step personalizzabili e modalita durata.

Import

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

Formato Valore

Direzione	Formato
`modelValue` in ingresso	`HH:MM` (es. `"14:30"`) o `''`
`update:modelValue` in uscita	`HH:MM`
Visualizzato all'utente	`HH:MM` (input nativo `<input type="time">`)

Il popup mostra un orologio interattivo (variante clock) o un selettore compatto con frecce (variante compact, default).

step vs precision — step (in secondi) agisce sull'input HTML nativo <input type="time"> e influenza solo le frecce su/giù del browser. precision (in minuti, valori 1 | 5 | 10 | 15 | 30 | 60) limita la selezione nel popup Clock. Per coerenza usa entrambi: :step="900" + :precision="15".

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string`	—	Valore corrente in formato `HH:MM` (v-model)
`defaultValue`	`string \| null`	—	Valore iniziale non controllato
`label`	`string`	—	Label del campo
`placeholder`	`string`	—	Testo placeholder
`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
`min`	`string`	—	Orario minimo (es. `'08:00'`)
`max`	`string`	—	Orario massimo (es. `'18:00'`)
`step`	`string \| number`	—	Step in secondi per l'input nativo (es. `900` = 15 minuti)
`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 per l'input
`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
`clockVariant`	`'clock' \| 'compact'`	`'compact'`	Stile del picker: analogico o a frecce
`precision`	`1 \| 5 \| 10 \| 15 \| 30 \| 60`	`1`	Precisione minuti nel picker
`separator`	`string`	`':'`	Separatore ore:minuti
`afternoonHoursInOuterCircle`	`boolean`	`false`	Ore pomeridiane nel cerchio esterno
`alwaysSelectHoursFirst`	`boolean`	`false`	Seleziona sempre prima le ore
`duration`	`boolean`	`false`	Modalità durata (consente ore > 23)
`durationNegative`	`boolean`	`false`	Permette durate negative
`useDurationPlusSign`	`boolean`	`false`	Mostra segno + per durate positive
`hideUnselectableNumbers`	`boolean`	`false`	Nasconde numeri non selezionabili
`vibrate`	`boolean`	`true`	Vibrazione su selezione (mobile)
`popupWidth`	`number`	`280`	Larghezza del popup Clock in pixel
`showClockHeader`	`boolean`	`false`	Mostra header con orario nel Clock
`showClockFooter`	`boolean`	`true`	Mostra footer con bottoni OK/Annulla
`fonts`	`ClockFonts`	—	Font personalizzati per il clock analogico
`i18n`	`ClockI18n`	—	Testi localizzati per i bottoni del Clock

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string`	Aggiornamento valore (v-model)
`input`	`{ originalEvent: Event; value: string }`	Cambio durante la digitazione
`change`	`{ originalEvent: Event; value: string }`	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

Slot

Slot	Descrizione
`prefix`	Sostituisce/aggiunge contenuto a sinistra dell'input (override del `prefixIcon`)

Esempi

Con limiti orari

Con step e precision allineati

Lo step (in secondi) agisce sull'input HTML nativo, precision (in minuti) sul popup Clock. Per UX coerente impostali in modo equivalente — qui 900s = 15min.

Clock analogico

Confronto compact vs clock

La variante compact mostra ore/minuti con frecce su/giù (più adatta a scrivanie e form densi). La variante clock apre un quadrante analogico interattivo (più immediata su touch).

Modalità durata

Con duration=true il valore può superare le 23 ore. Combinala con durationNegative=true per durate negative (es. fusi orari, scostamenti).

Metodi Esposti

Metodo	Descrizione
`focus()`	Porta il focus sull'input
`blur()`	Rimuove il focus dall'input
`select()`	Seleziona il testo nell'input

Accessibilità

L'input usa type="time" nativo del browser per compatibilità (selettore di sistema su mobile, validazione automatica)
Il pulsante orologio ha tabindex="-1" (fuori dal tab order)
Il popup si chiude con Escape
Tab fuori dall'input chiude il picker e porta il focus all'elemento successivo
L'auto-completamento intelligente completa l'orario digitando solo le ore

TypeScript

import type { TimePickerProps, ClockFonts, ClockI18n } from '@pzeta/vue-components'

const timeValue = ref<string>('')

const customFonts: ClockFonts = {
  fontFamily: 'Inter, sans-serif',
  clockOuterCircleFontSize: 14,
  clockInnerCircleFontSize: 11,
}

const customI18n: ClockI18n = {
  okButton: 'Conferma',
  cancelButton: 'Annulla',
}

Textarea

Campo di testo multiriga con supporto per auto-resize, contatore caratteri e controllo del ridimensionamento manuale.

ToggleSwitch

Interruttore on/off con icone personalizzabili, supporto per trueValue/falseValue, varianti di dimensione e severità.