Saltare al contenuto

Inizio Guida

GitHub

Puoi utilizzare la nostra configurazione assistita da AI per installare il plugin. Aggiungi le Capgo competenze al tuo strumento AI utilizzando il seguente comando:

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

Usa poi 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 i seguenti comandi e segui le istruzioni specifiche del tuo platform sotto:

Finestra del terminale
npm install @capgo/capacitor-date-picker
npx cap sync
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);
const result = await DatePicker.present({
mode: 'time',
is24h: true,
minuteStep: 15,
format: 'HH:mm',
title: 'Select time',
});
console.log(result.value);
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',
});
const result = await DatePicker.present({
mode: 'yearAndMonth',
date: '2026-05-01',
format: 'yyyy-MM',
title: 'Select month',
});

Scegli un intervallo

Scegli una finestra di tempo
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);
await DatePicker.hide();
await DatePicker.present({
mode: 'date',
date: '2026-05-27',
title: 'Select date',
ios: {
style: 'inline',
theme: 'light',
},
android: {
theme: 'light',
},
});
OpzioneDescrizione
modedate, time, dateAndTime, yearAndMonth, countDownTimer, o range.
dateValore selezionato iniziale.
min / maxValori minimi e massimi selezionabili.
formatFormato di output. Sono supportati formati ISO, Java/Unicode e Moment-style comuni.
titleTitolo della finestra di dialogo.
localeLingua utilizzata dai picker nativi dove supportata.
timezoneFuso orario utilizzato per la parsing e la formattazione.
is24hPreferisci l'orario 24 ore.
minuteStepIntervallo di minuti del picker orario.
doneText / cancelTextEtichette di azione personalizzate.

La repository include un Capacitor esempio di app che apre il picker di data nativo, picker di ora, picker di intervallo, hide()e chiamate di versione del plugin.

IOSAndroid
Demo animata di iOS di @capgo/capacitor-picker-di-data che si apre, seleziona una data e si chiudeDemo animata di Android di @capgo/capacitor-picker-di-data che si apre, seleziona una data e si chiude

La documentazione completa di API è mantenuta nel file README e nelle definizioni TypeScript: