Salta al contenuto principale
@capgo/capacitor-date-picker API dei dispositivi Open source

Selettore data Plugin Capacitor

Picker nativo per data, ora, data-ora, anno-mese e intervallo su iOS, Android e Web

Installa

bun add @capgo/capacitor-date-picker bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-date-picker
  • pnpm add @capgo/capacitor-date-picker
  • yarn add @capgo/capacitor-date-picker

Guida

Come usare Date Picker in Capacitor

Testa sul dispositivo

Scarica l'app Capgo, poi scansiona il QR code.

Anteprima QR del plugin Date Picker code

Usando @capgo/capacitor-date-picker

@capgo/capacitor-date-picker aggiungi selettori nativi di data, ora, data-ora, anno-mese e intervallo alle app Capacitor su iOS e Android, con un fallback Web equivalente.

Questa è l'alternativa mantenuta da Capgo a @capacitor-community/date-picker. Ascoltiamo i feedback della community, risolviamo i bug velocemente e rilasciamo aggiornamenti invece di lasciare aperti problemi GitHub per mesi.

Installa

npm install @capgo/capacitor-date-picker
npx cap sync

Demo Native Picker

iOS Android
Demo animata iOS: apertura, selezione data e chiusura di @capgo/capacitor-date-picker Demo animata Android: apertura, selezione data e chiusura di @capgo/capacitor-date-picker

Screenshot del Picker nativo

iOS Android
Screenshot iOS di @capgo/capacitor-date-picker con il date picker nativo Screenshot Android di @capgo/capacitor-date-picker con il date picker nativo

Seleziona una data

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

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',
});

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

Chiudi un picker attivo

await DatePicker.hide();

Cosa risolve

  • Supporto per Capacitor 8.
  • Implementazione web con lo stesso present() API.
  • Programmatico hide().
  • Supporto per il titolo del dialog.
  • Layout sicuro per la rotazione su iOS, gestione locale e yearAndMonth modalità.
  • Parsing delle date più sicuro e gestione timezone per date singole.
  • opzioni annidate su Android, is24h, gestione del layout del dialog e del dialog sul thread UI.
  • Selezione dei minuti e dell'intervallo di date.

Riferimento completo

FAQ

FAQ del plugin Date Picker

Come installo il plugin Date Picker in un'app Capacitor?

Esegui "bun add @capgo/capacitor-date-picker" (o "npm install @capgo/capacitor-date-picker"), poi esegui "bunx cap sync" in modo che i progetti iOS e Android carichino il code nativo. Importalo da "@capgo/capacitor-date-picker" nel tuo code.

@capgo/capacitor-date-picker funziona con React, Vue e Angular?

Sì. Date Picker è un pacchetto Capacitor, quindi funziona con qualsiasi framework web che giri all'interno di Capacitor, inclusi Ionic, React, Vue, Angular, Svelte e JavaScript puro.

Quale versione di Capacitor supporta @capgo/capacitor-date-picker?

I plugin Capgo seguono la major version di Capacitor: usa la major version del plugin che corrisponde alla tua major version di Capacitor (ad esempio plugin v8 con Capacitor 8). La tabella di compatibilità nel README di GitHub elenca le versioni mantenute.

@capgo/capacitor-date-picker è free e open source?

Sì. Il codice sorgente di code è pubblico su GitHub all'indirizzo https://github.com/Cap-go/capacitor-date-picker/ e il pacchetto è gratuito su npm. Bug report e pull request sono i benvenuti.

Posso aggiornare code che usa Date Picker senza passare per la revisione dell'App Store?

Installare o aggiornare il plugin modifica il code nativo, quindi serve una nuova build per lo store. Dopo, le modifiche a JavaScript, HTML e CSS che chiamano il plugin possono essere rilasciate subito con le live updates di Capgo.

Rilascia modifiche al Date Picker senza attendere la revisione dell'app

Una volta incluso il plugin nel tuo store build, Capgo invia le modifiche a JavaScript, HTML e CSS tramite live updates in pochi minuti.

Inizia con Capgo