Einstieg
Kopiere eine Einrichtungshinweis mit den Installationsanweisungen und der vollständigen Markdown-Dokumentation für dieses 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.
Installieren
Abschnitt mit dem Titel „Installieren“Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie den Capgo-Fähigkeiten Ihrer AI-Werkzeugleiste mit folgendem Befehl hinzu:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsVerwenden Sie dann 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 die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den unten aufgeführten plattformspezifischen Anweisungen:
npm install @capgo/capacitor-date-pickernpx cap syncImportieren
Abschnitt mit dem Titel „Importieren“import { DatePicker } from '@capgo/capacitor-date-picker';Ein Datum auswählen
Abschnitt mit dem Titel „Ein Datum auswählen“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);Ein Zeitpunkt auswählen
Abschnitt mit dem Titel „Ein Zeitpunkt auswählen“const result = await DatePicker.present({ mode: 'time', is24h: true, minuteStep: 15, format: 'HH:mm', title: 'Select time',});
console.log(result.value);Ein Datum und eine Uhrzeit auswählen
Abschnitt mit dem Titel “Wähle Datum und Uhrzeit”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 wählen
Abschnitt mit dem Titel “Ein Monat wählen”const result = await DatePicker.present({ mode: 'yearAndMonth', date: '2026-05-01', format: 'yyyy-MM', title: 'Select month',});Ein Bereich wählen
Abschnitt mit dem Titel “Ein Bereich wä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);Picker verbergen
Abschnitt mit dem Titel “Picker verbergen”await DatePicker.hide();Plattformseinstellungen
Abschnitt mit dem Titel „Plattformoptionen”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öchstwerte für die Auswahl. |
format | Ausgabeformat. ISO, Java/Unicode und gängige Moment-Formatierungen sind unterstützt. |
title | Fensterüberschrift. |
locale | Landescode, die von den native Pickern verwendet wird, wenn unterstützt. |
timezone | Zeitzone, die für das Parsen und Formatieren verwendet wird. |
is24h | 24-Stunden-Zeit vorziehen. |
minuteStep | Intervall für die Minuten im Zeitpicker. |
doneText / cancelText | Benutzerdefinierte Bezeichnungen für Aktionen. |
Beispiel-App
Abschnitt mit dem Titel „Beispiel-App“Das Repository enthält eine Capacitor Beispiel-App, die den nativen Datums-, Zeit-, Bereichs- und Plugin-Version-Aufruf öffnet. hide()iOS
| Android | Animierte iOS-Demo von @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-date-picker, die ein Datum öffnet, auswählt und schließt. |
|---|---|
![]() | ![]() |
API Referenz
Abschnitt mit dem Titel “API Referenz”Die vollständige API-Referenz wird im Paket README und TypeScript-Definitionen aufbewahrt:

