# tmw-picker

> Date, time and range picker components for Angular - no Material, no CDK, Luxon-based, standalone, form-ready

Latest version **1.2.18** (published 2026-08-03) · 0 weekly downloads

## Install

```sh
npm install tmw-picker
pnpm add tmw-picker
yarn add tmw-picker
bun add tmw-picker
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.2.18 |
| Published | 2026-08-03 |
| First published | 2023-09-05 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | EqProject |
| Maintainers | eqp |

## Links

- npm: https://www.npmjs.com/package/tmw-picker
- npm.io page: https://npm.io/package/tmw-picker

## Dependencies (2)

- [luxon](https://npm.io/package/luxon.md) ^3.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 1.2.18 (latest) — 2026-08-03
- 1.2.17 — 2026-07-22
- 1.2.15 — 2026-07-20
- 1.2.14 — 2026-07-20
- 1.2.13 — 2026-07-20
- 1.2.12 — 2026-07-20
- 1.2.11 — 2026-07-20
- 1.2.10 — 2026-07-20
- 1.2.9 — 2026-07-20
- 1.2.8 — 2026-07-11
- 1.2.7 — 2026-07-11
- 1.2.6 — 2026-07-10
- 1.2.5 — 2026-06-24
- 1.2.4 — 2026-06-23
- 1.2.3 — 2026-06-16
- … 73 more at https://npm.io/package/tmw-picker/versions

## README

# 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

```bash
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.

```ts
import { TmwDateTimePickerComponent } from 'tmw-picker';

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

## Uso

### Modalità (`pickerMode`)

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

### Tipo di output (`timeType`)

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

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

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

### Intervallo

```html
<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](https://moment.github.io/luxon/#/formatting?id=table-of-tokens):
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](./USAGE.md)** — guida d'uso con casi pratici pronti da copiare
  (setup, ogni modalità, form, validazione, timezone, i18n).
- **[MIGRATION.md](./MIGRATION.md)** — breaking changes 1.0.x → 1.1.0.
- **[CHANGELOG.md](./CHANGELOG.md)** — storico delle versioni.

## Migrazione dalla 1.0.x

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

---
_Source: https://npm.io/package/tmw-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._