Guide
Comment utiliser Date Picker dans Capacitor
Utiliser @capgo/capacitor-date-picker
@capgo/capacitor-date-picker ajoute des sélecteurs natifs de date, heure, date-heure, année-mois et de plage à vos applications Capacitor sur iOS et Android, avec un fallback Web équivalent.
C'est l'alternative maintenue par Capgo à @capacitor-community/date-picker. Nous écoutons les retours de la communauté, corrigeons les bugs rapidement et déployons des mises à jour au lieu de laisser des problèmes GitHub sans solution.
Installer
npm install @capgo/capacitor-date-picker
npx cap sync
Démo du picker natif
| iOS | Android |
|---|---|
![]() |
![]() |
Captures d'écran du picker natif
| iOS | Android |
|---|---|
![]() |
![]() |
Choisir une date
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);
Choisir une heure
const result = await DatePicker.present({
mode: 'time',
is24h: true,
minuteStep: 15,
format: 'HH:mm',
title: 'Select time',
});
Choisir une période
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);
Fermer un sélecteur actif
await DatePicker.hide();
Ce que ce correctif résout
- Support de Capacitor 8.
- Implémentation web avec le même
present()API. - Programmatique
hide(). - Support du titre de dialogue.
- mise en page adaptée à la rotation iOS, gestion de la locale et
yearAndMonthmode. - Parsing de dates plus sûr et gestion du fuseau horaire des dates sans heure.
- Options imbriquées sur Android,
is24h, gestion de la mise en page des dialogues et des dialogues sur le thread UI. - Incréments de minutes et sélection de plage de dates.
Référence complète
- GitHub : https://github.com/Cap-go/capacitor-date-picker/
- Docs : /docs/plugins/date-picker/



