Guide
Comment utiliser le sélecteur de date dans Capacitor
En utilisant @capgo/capacitor-date-picker
@capgo/capacitor-date-picker ajoute des sélecteurs de date, de temps, de date-heure, d'année-mois et de plage natifs aux applications Capacitor sur iOS et Android, avec un fallback Web correspondant.
Ceci est l'alternative maintenue par Capgo à @capacitor-community/date-pickerNous écouter les rapports de la communauté, résolvons les problèmes rapidement et expédions les mises à jour plutôt que de laisser les problèmes persistants GitHub ouverts.
Installer
npm install @capgo/capacitor-date-picker
npx cap sync
Démonstration du sélecteur natif
| iOS | Android |
|---|---|
![]() |
![]() |
Écrans de sélection de date natifs
| iOS | Android |
|---|---|
![]() |
![]() |
Pick A 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);
Pick A Time
const result = await DatePicker.present({
mode: 'time',
is24h: true,
minuteStep: 15,
format: 'HH:mm',
title: 'Select time',
});
Sélectionner une plage
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 cela corrige
- Capacitor 8 support.
- Implémentation web avec le même
present()API. - Programmation
hide(). - Titre du dialogue
- iOS rotation-safe layout, gestion de la localisation, et
yearAndMonthmode. - Safer date parsing and date-only timezone handling.
- Options Android imbriquées,
is24h, dialog layout handling, and UI-thread dialog handling. - Étapes de minute et sélection de plage de date.
Référence Complète
- GitHub : https://github.com/Cap-go/capacitor-date-picker/
- Documentation : /docs/plugins/date-picker/



