Einstieg
Einrichtungsanleitung mit Installationsanweisungen und der vollständigen Markdown-Guideline für dieses Plugin kopieren.
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.
Installieren
Abschnitt mit dem Titel „Installieren“Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem AI-Tool hinzu, indem Sie die folgende Befehlszeile verwenden:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsDann verwenden Sie die folgende Anfrage:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.Wenn Sie eine manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die unten angegebenen plattform-spezifischen Anweisungen befolgen:
npm install @capgo/capacitor-date-pickernpx cap syncImportieren
Abschnitt mit dem Titel „Importieren“import { DatePicker } from '@capgo/capacitor-date-picker';Wählen Sie einen Tag
Abschnitt mit dem Titel „Wählen Sie einen Tag“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);Wählen Sie eine Uhrzeit
Abschnitt mit dem Titel „Wählen Sie eine Uhrzeit“const result = await DatePicker.present({ mode: 'time', is24h: true, minuteStep: 15, format: 'HH:mm', title: 'Select time',});
console.log(result.value);Datum und Uhrzeit auswählen
Abschnitt mit dem Titel „Datum und Uhrzeit auswählen“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',});Ein Monat auswählen
Abschnitt mit dem Titel „Ein Monat auswählen“const result = await DatePicker.present({ mode: 'yearAndMonth', date: '2026-05-01', format: 'yyyy-MM', title: 'Select month',});Ein Bereich auswählen
Abschnitt mit dem Titel „Ein Bereich auswählen“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);Der Picker verbergen
Abschnitt mit dem Titel „Der Picker verbergen“await DatePicker.hide();Plattform-Optionen
Abschnitt mit dem Titel „Plattform-Optionen“await DatePicker.present({ mode: 'date', date: '2026-05-27', title: 'Select date', ios: { style: 'inline', theme: 'light', }, android: { theme: 'light', },});Gemeinsame Optionen
Abschnitt mit dem Titel „Gemeinsame Optionen“| Option | Beschreibung |
|---|---|
mode | date, time, dateAndTime, yearAndMonth, countDownTimeroder range. |
date | Ausgewählter Wert zum Starten. |
min / max | Mindest- und Höchstwert für die Auswahl. |
format | Ausgabeformat. ISO, Java/Unicode und gängige Moment-Formatierungen sind unterstützt. |
title | Titel des Dialogs. |
locale | Sprache, die von den native Pickern verwendet wird, wenn unterstützt. |
timezone | Zeitzone, die für die Analyse und Formatierung verwendet wird. |
is24h | 24-Stunden-Zeit vorziehen. |
minuteStep | Minutenintervall des Zeitpickers. |
doneText / cancelText | Benutzertexte für benutzerdefinierte Aktionen. |
Beispiel-App
Abschnitt mit dem Titel „Beispiel-App“The repository includes a Capacitor example app that opens the native date picker, time picker, range picker, hide()IOS
| Android | Das Repository enthält ein Beispiel-App, die den native Datums-, Zeit- und Bereichswähler sowie die Versionsaufrufe der Plugins öffnet __CAPGO_KEEP_0__. |
|---|---|
![]() | ![]() |
API-Referenz
Abschnitt mit dem Titel “API-Referenz”Die vollständige API-Referenz wird im Paket README und TypeScript-Definitionen aufrechterhalten:

