Allez directement au contenu principal
@capgo/capacitor-dateur APIs de dispositifs Source

Sélecteur de date plugin Capacitor

Un sélecteur de date, d'heure, de date-heure, d'année-mois et de 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 le sélecteur de date dans Capacitor

Tester sur appareil

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

Prévisualisation du plugin Date Picker QR code

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
Demo animé iOS de @capgo/capacitor-date-picker s'ouvrant, sélectionnant une date et se fermant Demo animé Android de @capgo/capacitor-date-picker s'ouvrant, sélectionnant une date et se fermant

Écrans de sélection de date natifs

iOS Android
Écran d'affichage de @capgo/capacitor-date-picker montrant le sélecteur de date natif sur iOS Écran d'affichage de @capgo/capacitor-date-picker montrant le sélecteur de date natif sur 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 yearAndMonth mode.
  • 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

FAQ

FAQ du Composant de Sélection de Date

Comment installer le composant de sélection de date dans une application Capacitor?

Exécutez « bun add @capgo/capacitor-date-picker » (ou « npm install @capgo/capacitor-date-picker »), puis exécutez « bunx cap sync » afin que les projets iOS et Android prennent en compte le code natif. Importez-l’à partir de « @capgo/capacitor-date-picker » dans votre application code.

Le composant @capgo/capacitor-date-picker fonctionne-t-il avec React, Vue et Angular?

Oui. Le composant de sélection de date est un paquet Capacitor, il fonctionne donc avec tout framework web qui s'exécute à l'intérieur de Capacitor, y compris Ionic, React, Vue, Angular, Svelte et JavaScript pur.

Quelle version de Capacitor est prise en charge 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, plugin v8 avec Capacitor 8). La table de compatibilité dans le README du GitHub liste les versions maintenues.

Le composant @capgo/capacitor-date-picker est-il gratuit et open source?

Oui. La source code est publique sur GitHub à https://github.com/Cap-go/capacitor-date-picker/ et le package est gratuit pour l'installation à partir de npm. Les rapports de bugs et les demandes de tirage sont les bienvenus.

Puis-je mettre à jour code utilisant le sélecteur de date sans passer par une revue de l'App Store ?

L'installation ou la mise à niveau du plugin modifie la code native, elle nécessite donc une nouvelle construction de l'application. Une fois cela fait, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être envoyées instantanément avec les mises à jour Capgo en direct.

Envoyez les modifications du Date Picker sans attendre la revue de l'application

Une fois le plugin est dans votre magasin de build, les mises à jour en direct Capgo poussent vos modifications JavaScript, HTML et CSS vers les utilisateurs en quelques minutes.

Démarrez avec Capgo