En utilisant @capgo/capacitor-date-picker

@capgo/capacitor-date-picker ajoute des sélecteurs de date, d'heure, de date et d'heure, d'année et de mois, et de plage à des applications Capacitor natives sur iOS et Android, avec un fallback Web correspondant.

Ceci est l'alternative maintenue par Capgo @capacitor-community/date-pickerCeci est l'alternative maintenue par GitHub à

Installer

npm install @capgo/capacitor-date-picker
npx cap sync

Démonstration native du sélecteur de date

iOS	Android

Captures d'écran de l'Afficheur natif

iOS	Android

Choisissez 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);

Choisissez une heure

const result = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
  title: 'Select time',
});

Choisissez 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 afficheur actif

await DatePicker.hide();

Ce que cela corrige

Capacitor 8 support.
Implémentation Web avec le même present() API.
Programmation hide().
Support de titre de dialogue.
Disposition de mise en page de rotation sécurisée, prise en charge de la localisation, et yearAndMonth mode.
Analyse de date plus sûre et prise en charge de la zone horaire uniquement pour la date.
Options Android imbriquées, is24hgestion de la disposition de dialogue, et prise en charge de dialogue sur le thread UI.
Étapes de minute et sélection de plage de date.

Référence complète

GitHub: https://github.com/Cap-go/capacitor-date-picker/
Docs: /docs/plugins/date-picker/

Sélection de date

Tutoriel sur le sélecteur de date