Vai al contenuto principale
@capgo/capacitor-selettore di data API di dispositivo Open source

Selettore di data Plugin Capacitor

Picker di data, ora, data-orario, anno-mese e intervallo per 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 utilizzare il calendario in Capacitor

Testa sul dispositivo

Scarica l'app Capgo, poi scansa il codice QR code.

Anteprima QR del plugin Date Picker code

Utilizzando @capgo/capacitor-date-picker

@capgo/capacitor-date-picker Aggiunge picker di data, ora, data-orario, anno-mese e intervalli nativi ai Capacitor app su iOS e Android, con un fallback Web corrispondente.

Questo è il plugin Date Picker mantenuto da Capgo @capacitor-community/date-pickerAscoltiamo i rapporti della community, risolviamo i problemi velocemente e inviamo gli aggiornamenti anziché lasciare aperti i problemi persistenti GitHub.

Sostituisce

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

Esempio di picker nativo

iOS Android
Esempio animato di iOS di @capgo/capacitor-date-picker che si apre, seleziona una data e si chiude Esempio animato di Android di @capgo/capacitor-date-picker che si apre, seleziona una data e si chiude

Sfondi del picker nativo

Sfondi iOS Sfondi Android
iOS screenshot di @capgo/capacitor-date-picker che mostra il picker di data nativo Schermata di Android di @capgo/capacitor-date-picker che mostra il picker di data nativo

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

Scegli un'ora

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

Scegli 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 questo

  • Capacitor 8 support.
  • Esecuzione web con lo stesso present() API.
  • Programmatic hide().
  • Titolo del dialogo supporto.
  • layout sicuro di rotazione per iOS, gestione di locale e yearAndMonth mode.
  • Analisi di data più sicura e gestione di timezone solo per date.
  • Opzioni nidificate per Android, is24h, dialog layout handling, and UI-thread dialog handling.
  • Passaggi minuti e selezione di intervallo di data.

Riferimento Completo

FAQ

Domande Frequenti del plugin Date Picker

Come posso installare il plugin Date Picker in un'app Capacitor?

Esegui "bun add @capgo/capacitor-date-picker" (o "npm install @capgo/capacitor-date-picker"), quindi esegui "bunx cap sync" affinché i progetti iOS e Android recuperino il code nativo. Importalo da "@capgo/capacitor-date-picker" nella tua app code.

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

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

Qual è la versione di Capacitor supportata da @capgo/capacitor-date-picker?

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

È gratuito e open source @capgo/capacitor-date-picker?

Si. La fonte code è pubblica su GitHub in https://github.com/Cap-go/capacitor-date-picker/ e il pacchetto è gratuito per l'installazione da npm. I rapporti di bug e le richieste di pull sono graditi.

Posso aggiornare code che utilizza il calendario senza una revisione dell'App Store?

L'installazione o l'aggiornamento del plugin modifica il code nativo, quindi richiede una nuova costruzione del negozio. Dopo di che, le modifiche JavaScript, HTML e CSS che chiamano il plugin possono essere inviate istantaneamente con gli aggiornamenti live di Capgo.

Invia le modifiche al calendario di data senza aspettare la revisione dell'app

Una volta che il plugin è presente nella tua store build, Capgo le aggiornamenti live spingono le tue modifiche JavaScript, HTML e CSS ai utenti in pochi minuti.

Inizia con Capgo