Prise en main

Copiez un prompt de configuration incluant les étapes d'installation et le guide markdown complet pour ce plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installer

Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Utilisez ensuite le prompt suivant :

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.

Si vous préférez une installation manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à chaque plateforme ci-dessous :

bun add @capgo/capacitor-date-picker
bunx cap sync

Importer

import { DatePicker } from '@capgo/capacitor-date-picker';

Erreurs courantes

Se cacher entre les cadeaux: appelez hide() if users can open another picker while one is visible.
Chaînes ISO: passer date, min, et max au format de chaîne documenté pour votre format option.
Validation de plage: presentRange() should enforce business rules server side too, users can pick edge dates offline.

Choisir une date

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',
});

console.log(result.value);

Choisir la date et l'heure

const result = await DatePicker.present({
  mode: 'dateAndTime',
  date: '2026-05-27T14:30:00',
  format: "yyyy-MM-dd'T'HH:mm:ss",
  title: 'Select date and time',
});

Choisir un mois

const result = await DatePicker.present({
  mode: 'yearAndMonth',
  date: '2026-05-01',
  format: 'yyyy-MM',
  title: 'Select month',
});

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, range.value);

Masquer le sélecteur

await DatePicker.hide();

Options de plateforme

await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  title: 'Select date',
  ios: {
    style: 'inline',
    theme: 'light',
  },
  android: {
    theme: 'light',
  },
});

Options communes

Option	Description
`mode`	`date`, `time`, `dateAndTime`, `yearAndMonth`, `countDownTimer`, ou `range`.
`date`	Valeur sélectionnée initiale.
`min` / `max`	Valeurs minimale et maximale sélectionnables.
`format`	Format de sortie. ISO, Java/Unicode et les formats courants de type Moment sont pris en charge.
`title`	Titre de la boîte de dialogue.
`locale`	Locale utilisée par les sélecteurs natifs lorsque c'est supporté.
`timezone`	Fuseau horaire utilisé pour le parsing et le formatage.
`is24h`	Préférer le format 24 heures.
`minuteStep`	Intervalle des minutes du sélecteur d'heure.
`doneText` / `cancelText`	Libellés personnalisés des actions.

App exemple

Le dépôt inclut une application exemple Capacitor qui ouvre le sélecteur de date, l'heure ou de plage natif, hide(), et les appels de version du plugin.

iOS	Android

Référence API

La référence API complète est disponible dans le README du package et les définitions TypeScript :