Saltare al contenuto principale

Guida

Tutoriale sul calendario

Testare sul dispositivo

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

Collegamento QR di anteprima del plugin di selezione della data code

Utilizza @capgo/capacitor-date-picker

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

Questa è l'alternativa mantenuta da Capgo @capacitor-community/date-pickerQuesta è l'alternativa mantenuta da GitHub al

Ascoltiamo i rapporti della community, risolviamo gli issue velocemente e inviamo aggiornamenti anziché lasciare aperti gli issue __CAPGO_KEEP_0__ a lungo.

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

Installa

Esempio di demo del picker nativo Esempio di demo iOS
Animated iOS demo of @capgo/capacitor-date-picker opening, selecting a date, and closing Esempio animato di demo iOS di @capgo/capacitor-date-picker che si apre, seleziona una data e si chiude,

Schermate del Picker Nativo

iOS Android
Screenshot di iOS di @capgo/capacitor-date-picker che mostra il picker di data nativo Screenshot 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 supporta.
  • Implementazione Web con lo stesso present() API.
  • Programmatico hide().
  • Supporto per titolo di dialogo.
  • Disposizione di layout sicura per rotazione iOS, gestione di locale e yearAndMonth modalità.
  • Analisi di data più sicura e gestione di zona oraria di data solo.
  • Opzioni annidate Android, is24hgestione di layout di dialogo e gestione di dialogo su thread UI.
  • Passi di minuti e selezione di intervallo di data.

Riferimento completo