Saltare al contenuto principale
@capgo/capacitor-selettore di data Device APIs Abrivo sorgente

Picker di data Plugin Capacitor

Un picker di data, ora, data-orario, anno-mese e intervallo nativo 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.

Link QR anteprima del plugin Date Picker code

Utilizza @capgo/capacitor-date-picker

@capgo/capacitor-date-picker Aggiunge picker di data, ora, data-orario, anno-mese e range nativi alle app Capacitor 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 aggiornamenti anziché lasciare aperti i problemi persistenti GitHub.

Sostituisci

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

Demo 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 orario

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 supporti.
  • Implementazione web con lo stesso present() API.
  • Programmatico hide().
  • Titolo del dialogo supportato.
  • layout sicuro dalla rotazione per iOS, gestione della locale e yearAndMonth mode.
  • Gestione delle opzioni Android nidificate,
  • Opzioni Android nidificate, is24hGestione layout del dialogo, gestione del dialogo su thread UI.
  • Passaggi minuti e selezione di intervallo di data.

Riferimento Completo

FAQ

Domande Frequenti sul 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 nativo code. Importalo da "@capgo/capacitor-date-picker" nella tua app code.

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

Sì. Il picker di date è 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 di data 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 Capgo in tempo reale.

Invia le modifiche al calendario dei dati senza attendere la revisione dell'app.

Una volta che il plugin è presente nella tua build di store, Capgo le modifiche JavaScript, HTML e CSS vengono pushate ai tuoi utenti in pochi minuti.

Inizia con Capgo