tmw-picker

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

Installazione

npm i tmw-picker luxon @angular/material @angular/material-luxon-adapter

@angular/material, @angular/material-luxon-adapter, @angular/cdk, @angular/common e @angular/core 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 | | 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 usano il focus-trap di Material con aria-label.

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).