Aller au contenu principal
@capgo/capacitor-date-picker API de l'appareil Open source

Sélecteur de date Plugin Capacitor

Sélecteur natif de date, heure, date-heure, année-mois et plage pour iOS, Android et Web

Installer

bun add @capgo/capacitor-date-picker bunx cap sync
npm, pnpm ou yarn
  • npm install @capgo/capacitor-date-picker
  • pnpm add @capgo/capacitor-date-picker
  • yarn add @capgo/capacitor-date-picker

Guide

Comment utiliser Date Picker dans Capacitor

Tester sur l'appareil

Téléchargez l'application Capgo, puis scannez le QR code.

Aperçu du plugin Date Picker via QR code

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
Démo animée iOS : ouverture de @capgo/capacitor-date-picker, sélection d'une date et fermeture Démo animée Android : ouverture de @capgo/capacitor-date-picker, sélection d'une date et fermeture

Captures d'écran du picker natif

iOS Android
Capture d'écran iOS de @capgo/capacitor-date-picker montrant le sélecteur de date natif Capture d'écran Android de @capgo/capacitor-date-picker montrant le sélecteur de date natif

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 yearAndMonth mode.
  • 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

FAQ

FAQ du plugin Date Picker

Comment installer le plugin Date Picker dans une application Capacitor ?

Exécutez "bun add @capgo/capacitor-date-picker" (ou "npm install @capgo/capacitor-date-picker"), puis lancez "bunx cap sync" pour que les projets iOS et Android prennent en compte le code natif. Importez-le depuis "@capgo/capacitor-date-picker" dans votre application code.

Est-ce que @capgo/capacitor-date-picker fonctionne avec React, Vue et Angular ?

Oui. Date Picker est un package Capacitor, il fonctionne donc avec n'importe quel framework web tournant sous Capacitor, y compris Ionic, React, Vue, Angular, Svelte et le JavaScript pur.

Quelle version de Capacitor est supportée par @capgo/capacitor-date-picker ?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à la version majeure de votre Capacitor (par exemple le plugin v8 avec Capacitor 8). Le tableau de compatibilité du README de GitHub recense les versions maintenues.

Est-ce que @capgo/capacitor-date-picker est gratuit et open source ?

Oui. Le code source de code est public sur GitHub à l'adresse https://github.com/Cap-go/capacitor-date-picker/ et le package est gratuit à installer via npm. Les rapports de bugs et les pull requests sont les bienvenus.

Puis-je mettre à jour code utilisant Date Picker sans passer par une revue de l'App Store ?

L'installation ou la mise à jour du plugin modifie le code natif, ce qui impose un nouveau build pour les stores. Ensuite, les changements JavaScript, HTML et CSS qui appellent le plugin peuvent être livrés instantanément via les live updates de Capgo.

Déployez les changements de Date Picker sans attendre la validation de l'app

Une fois le plugin intégré à votre build de store, Capgo live updates déploie vos changements JavaScript, HTML et CSS aux utilisateurs en quelques minutes.

Commencez avec Capgo