Forms

DatePicker

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

Import

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

Il valore emesso e una stringa in formato ISO YYYY-MM-DD. L'input visualizza il formato DD/MM/YYYY. L'auto-completamento intelligente permette di digitare solo il giorno (completato al mese/anno corrente) o giorno+mese.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| Date \| Date[] \| null`	—	Valore corrente (v-model)
`defaultValue`	`string \| Date \| Date[] \| 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
`inline`	`boolean`	`false`	Calendario sempre visibile senza popup
`min`	`string`	—	Data minima in formato `YYYY-MM-DD`
`max`	`string`	—	Data massima in formato `YYYY-MM-DD`
`minDate`	`Date \| null`	—	Data minima come oggetto Date
`maxDate`	`Date \| null`	—	Data massima come oggetto Date
`disabledDates`	`Date[] \| null`	—	Lista di date disabilitate
`disabledDays`	`number[] \| null`	—	Giorni della settimana disabilitati (0=Dom, 6=Sab)
`selectionMode`	`'single' \| 'multiple' \| 'range'`	—	Modalita di selezione
`dateFormat`	`string`	—	Formato di visualizzazione data
`showTime`	`boolean`	—	Mostra selettore orario nel calendario
`timeOnly`	`boolean`	—	Solo selettore orario
`hourFormat`	`'12' \| '24'`	—	Formato ore
`numberOfMonths`	`number`	—	Numero di mesi visualizzati affiancati
`showWeek`	`boolean`	—	Mostra numero settimana
`showWeekNumbers`	`boolean`	`false`	Mostra numeri di settimana nella colonna sinistra
`showButtonBar`	`boolean`	—	Mostra barra pulsanti oggi/clear nel calendario
`showQuickOptions`	`boolean`	`false`	Mostra opzioni rapide (Oggi, Domani, ecc.)
`quickOptions`	`CalendarQuickOption[]`	—	Opzioni rapide personalizzate
`firstDayOfWeek`	`number`	locale	Primo giorno settimana (0=Dom, 1=Lun)
`showActionButtons`	`boolean`	`false`	Chiude popup solo su conferma/annulla
`view`	`'date' \| 'month' \| 'year'`	—	Vista iniziale del calendario
`yearRange`	`string \| null`	—	Intervallo anni selezionabili (es. `'1900:2030'`)
`touchUI`	`boolean`	—	Ottimizzato per dispositivi touch
`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

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| Date \| Date[] \| null`	Aggiornamento valore (v-model)
`input`	`{ originalEvent: Event; value: string \| Date \| Date[] \| null }`	Input testuale
`change`	`{ originalEvent: Event; value: string \| Date \| Date[] \| 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 \| Date[]`	Data selezionata nel calendario
`todayClick`	—	Click su "Oggi" nel calendario
`clearClick`	—	Click su "Clear" nel calendario
`monthChange`	`{ month: number; year: number }`	Cambio mese nella navigazione
`yearChange`	`{ month: number; year: number }`	Cambio anno nella navigazione
`beforeShow`	—	Prima dell'apertura popup
`show`	—	Popup aperto
`beforeHide`	—	Prima della chiusura popup
`hide`	—	Popup chiuso
`confirm`	`string \| Date \| Date[] \| null`	Conferma selezione (con `showActionButtons`)
`cancel`	—	Annullamento selezione (con `showActionButtons`)

Slot

Slot	Descrizione
`icon`	Sostituzione dell'icona calendario
`calendar-header`	Contenuto aggiuntivo nell'header del popup calendario
`calendar-footer`	Contenuto aggiuntivo nel footer del popup calendario

Esempi

Con limiti di data

<DatePicker
  v-model="birthDate"
  label="Data di Nascita"
  placeholder="gg/mm/aaaa"
  :min="'1900-01-01'"
  :max="new Date().toISOString().split('T')[0]"
/>

Con opzioni rapide e conferma

<DatePicker
  v-model="dateValue"
  label="Data con conferma"
  show-action-buttons
  show-quick-options
  show-clear
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

Con show-action-buttons il popup si chiude solo premendo OK o Annulla. Il valore viene aggiornato solo alla conferma e l'evento confirm riceve il valore finale in formato ISO.

Calendario inline

Opzioni rapide personalizzate

<script setup lang="ts">
import type { CalendarQuickOption } from '@pzeta/vue-components'

const quickOptions: CalendarQuickOption[] = [
  { label: 'Oggi', value: () => new Date() },
  { label: 'Prossimo lunedi', value: () => {
    const d = new Date()
    d.setDate(d.getDate() + (8 - d.getDay()) % 7)
    return d
  }},
]
</script>

<template>
  <DatePicker
    v-model="dateValue"
    label="Data"
    show-quick-options
    :quick-options="quickOptions"
  />
</template>

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 calendario popup
`close()`	Chiude il calendario popup
`toggle()`	Alterna apertura/chiusura del popup

Accessibilita

Input associato alla label tramite id generato automaticamente o inputId
L'icona calendario e un <button> con tabindex="-1" (fuori dal tab order)
Il popup si chiude con Escape
Si apre con Enter quando l'input ha il focus

TypeScript

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

// Valore in formato ISO YYYY-MM-DD
const dateValue = ref<string>('')

// Opzioni rapide tipizzate
const quickOptions: CalendarQuickOption[] = [
  { label: 'Oggi', value: () => new Date() },
]

ColorPicker

Selettore colore nativo con formato hex, visualizzazione del valore, label, stati di errore e loading.

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.