Saltare al contenuto

Inizia

GitHub
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',
});
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, countDownTimero range.
dateValore predefinito selezionato inizialmente.
min / maxValori minimi e massimi selezionabili.
formatFormato di output. Sono supportati ISO, Java/Unicode e formati 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'ora 24.
minuteStepIntervallo di minuti del selettore dell'ora.
doneText / cancelTextEtichette dell'azione personalizzate.

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

AndroidDemo animata di iOS di @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-date-picker che si apre, seleziona una data e si chiude
Demo animata di Android di @capgo/capacitor-date-picker che si apre, seleziona una data e si chiudeAnimated Android demo of @capgo/capacitor-date-picker opening, selecting a date, and closing

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