tmw-picker

tmw-picker

Componenti Angular per la selezione di date, orari e intervalli — no Material, no CDK, costruiti su Luxon. Componenti standalone, integrazione nativa con i form (ControlValueAccessor), accessibili da tastiera.

Installazione

npm i tmw-picker luxon

@angular/common, @angular/core e @angular/forms sono peer dependencies.

Componenti

Selettore	Componente	Descrizione
tmw-datetimepicker	TmwDateTimePickerComponent	Componente polimorfico: data, data+ora, ora, data di nascita, time stepper (in base a pickerMode).
tmw-daterangepicker	TmwDateRangePickerComponent	Selettore di intervallo (da–a).
tmw-picker	TmwPickerComponent	Selettore a lista di stringhe (listbox accessibile).

Sono standalone: importali direttamente.

import { TmwDateTimePickerComponent } from 'tmw-picker';

@Component({
  standalone: true,
  imports: [TmwDateTimePickerComponent /*, ... */],
})
export class MyComponent {}

Uso

Modalità (pickerMode)

import { ModeEnum } from 'tmw-picker';
// DATETIMEPICKER, DATEPICKER, TIMEPICKER, BIRTHPICKER, TIMESTEPPERPICKER, DATERANGEPICKER

Tipo di output (timeType)

import { TimeTypeEnum } from 'tmw-picker';
// DATE   -> emette un oggetto Date JS
// STRING -> emette una stringa formattata con outputFormat
// MOMENT -> emette un oggetto Luxon DateTime

Reactive Forms

<form [formGroup]="form">
  <tmw-datetimepicker
    formControlName="appuntamento"
    [pickerMode]="mode.DATETIMEPICKER"
    [timeType]="type.DATE"
    [inputFormat]="'dd/MM/yyyy HH:mm'"
    [outputFormat]="'dd/MM/yyyy HH:mm'"
    [showSeconds]="false">
  </tmw-datetimepicker>
</form>

Template-driven / valore diretto

<tmw-datetimepicker
  [(ngModel)]="data"
  (dateChange)="onChange($event)"
  [pickerMode]="mode.DATEPICKER"
  [timeType]="type.STRING"
  [outputFormat]="'yyyy-MM-dd'">
</tmw-datetimepicker>

Intervallo

<tmw-daterangepicker
  formControlName="periodo"
  [timeType]="type.DATE">
</tmw-daterangepicker>
<!-- valore: { start, end } -->

Input principali (tmw-datetimepicker)

Input	Tipo	Default	Note
pickerMode	ModeEnum	BIRTHPICKER	modalità di funzionamento
timeType	TimeTypeEnum	DATE	tipo del valore emesso
label	string	''	etichetta del campo (vuota = nessuna etichetta)
haveFloatingLabel	boolean	false	se true, label si comporta come una vera etichetta fluttuante in stile Material: quando il campo è vuoto e senza focus viene mostrata "in linea" al posto del testo (placeholder), per poi salire sopra il bordo al focus o appena c'è una data valida. A false (default, comportamento pre-esistente) la label resta nascosta finché non c'è una data valida. Quando true e label non è vuota, il placeholder nativo della textarea viene azzerato per evitare la sovrapposizione con la label in stato "in linea"
inputFormat	string	''	token Luxon; 'default' sceglie in base a pickerMode
outputFormat	string	dd/MM/yyyy HH:mm:ss	token Luxon
locale	string	it-IT	pilota i nomi di mesi/giorni del calendario
timeZone	string | null	null	fuso IANA in cui interpretare/emettere il valore
forSaveLocalOnDB	boolean	false	emette una Date con campi UTC = orario locale
minDate / maxDate	Date | null	null	limiti (validati come errori di form)
currentDateAsDefault	boolean	false	usa "adesso" come valore iniziale
disabled / readonly	boolean	false
stepHour / stepMinute / stepSecond	number	1	passi per i selettori orari
showHours / showMinutes / showSeconds	boolean	true
highLightedDates	Date[]	[]	date evidenziate nel calendario

Output

Output	Tipo	Note
dateChange	EventEmitter<any>	valore a ogni cambio (oltre al ControlValueAccessor)

Formati (Luxon)

I formati usano i token di Luxon: es. dd/MM/yyyy, yyyy-MM-dd HH:mm:ss, HH:mm.

Accessibilità

I selettori a lista sono listbox ARIA navigabili da tastiera (frecce, Home, End, Invio); i dialog (role="dialog", aria-label) si chiudono solo tramite i bottoni Annulla/Conferma — non implementano un focus-trap: la tastiera può uscire dal pannello con Tab.

Documentazione

• USAGE.md — guida d'uso con casi pratici pronti da copiare (setup, ogni modalità, form, validazione, timezone, i18n).
• MIGRATION.md — breaking changes 1.0.x → 1.1.0.
• CHANGELOG.md — storico delle versioni.

Migrazione dalla 1.0.x

Vedi MIGRATION.md per i breaking changes della 1.1.0 (standalone, Luxon, ControlValueAccessor, token di formato).