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'

Esempio Base

Il valore e una stringa in formato HH:MM (es. "14:30"). Il popup mostra un orologio interattivo (variante clock) o un selettore compatto con frecce (variante compact, default).

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`	Modalita 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

Esempi

Con limiti orari

Con step (ogni 15 minuti)

Lo step e in secondi e agisce sull'input nativo <input type="time">. Per limitare la selezione nel picker Clock, usare la prop precision.

Clock analogico

Modalita durata

Metodi Esposti

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

Accessibilita

L'input usa type="time" nativo del browser per compatibilita
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à.