Per iniziare

Copia un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installa

Puoi usare il nostro setup assistito dall'IA per installare il plugin. Aggiungi le skill Capgo al tuo strumento di IA usando il seguente comando:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Poi usa il seguente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.

Se preferisci la configurazione manuale, installa il plugin eseguendo questi comandi e segui le istruzioni specifiche per piattaforma qui sotto:

bun add @capgo/capacitor-date-picker
bunx cap sync

Importa

import { DatePicker } from '@capgo/capacitor-date-picker';

Errori comuni

Nascondi tra i regali: chiamata hide() se gli utenti possono aprire un altro picker mentre uno è visibile.
Stringhe ISO: passa date, min, e max nel formato stringa documentato per la tua format opzione.
Validazione dell'intervallo: presentRange() dovrebbe applicare le regole di business anche lato server; gli utenti possono selezionare date ai limiti offline.

Seleziona una data

const result = await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  min: '2026-01-01',
  max: '2026-12-31',
  format: 'yyyy-MM-dd',
  title: 'Select date',
});

console.log(result.value);

Seleziona un orario

const result = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
  title: 'Select time',
});

console.log(result.value);

Seleziona data e ora

const result = await DatePicker.present({
  mode: 'dateAndTime',
  date: '2026-05-27T14:30:00',
  format: "yyyy-MM-dd'T'HH:mm:ss",
  title: 'Select date and time',
});

Seleziona un mese

const result = await DatePicker.present({
  mode: 'yearAndMonth',
  date: '2026-05-01',
  format: 'yyyy-MM',
  title: 'Select month',
});

Seleziona un intervallo

const range = await DatePicker.presentRange({
  start: '2026-05-01',
  end: '2026-05-27',
  format: 'yyyy-MM-dd',
  startTitle: 'Start date',
  endTitle: 'End date',
});

console.log(range.start, range.end, range.value);

Nascondi il picker

await DatePicker.hide();

Opzioni piattaforma

await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  title: 'Select date',
  ios: {
    style: 'inline',
    theme: 'light',
  },
  android: {
    theme: 'light',
  },
});

Opzioni comuni

Opzione	Descrizione
`mode`	`date`, `time`, `dateAndTime`, `yearAndMonth`, `countDownTimer`, o `range`.
`date`	Valore iniziale selezionato.
`min` / `max`	Valori minimi e massimi selezionabili.
`format`	Formato di output. Supporta ISO, Java/Unicode e i comuni formati stile Moment.
`title`	Titolo del dialog.
`locale`	Locale utilizzato dai picker nativi, dove supportato.
`timezone`	Timezone utilizzata per il parsing e la formattazione.
`is24h`	Preferisci il formato 24 ore.
`minuteStep`	Intervallo dei minuti nel time picker.
`doneText` / `cancelText`	Etichette personalizzate per le azioni.

App di esempio

Il repository include un'app di esempio Capacitor che apre il date picker nativo, il time picker, il range picker, hide(), e le chiamate alla versione del plugin.

iOS	Android

Riferimento API

La documentazione completa di API è disponibile nel README del pacchetto e nelle definizioni TypeScript: