Anleitung
Tutorial zum Datumswähler
Verwenden Sie @capgo/capacitor-datumsauswahl
@capgo/capacitor-date-picker fügt native Datums-, Zeit-, Datums-Zeit-, Jahr-Monat- und Bereichs-Auswahlfelder zu Capacitor-Apps auf iOS und Android hinzu, mit einer passenden Web-Fallback.
Dies ist Capgo's gepflegte Alternative zu @capacitor-community/date-pickerWir hören uns die Community-Berichte an, beheben Probleme schnell und liefern Updates anstatt lange offene GitHub-Probleme zu lassen.
Installieren
npm install @capgo/capacitor-date-picker
npx cap sync
Nativ-Datei-Auswahl-Beispiel
| iOS | Android |
|---|---|
![]() |
![]() |
Nativ-Picker-Bildschirme
| iOS | Android |
|---|---|
![]() |
![]() |
Wähle eine Datum
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);
Wähle eine Uhrzeit
const result = await DatePicker.present({
mode: 'time',
is24h: true,
minuteStep: 15,
format: 'HH:mm',
title: 'Select time',
});
Wähle ein Zeitintervall
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);
Schließe einen aktiven Picker
await DatePicker.hide();
Was dies behebt
- Capacitor 8 Support
- Web-Implementierung mit demselben
present()API. - Programmatische
hide(). - Unterstützung für den Dialogtitel.
- iOS-drehungssicheres Layout, Lokalisierung und Modus.
yearAndMonthBessere Datumserkennung und Zeitzone-Handling für Datum nur. - Android-Optionen in der NESTED-Ebene, Dialog-Layout-Handling und UI-Thread-Dialog-Handling.
- Minute-Schritte und Datumswahlbereich.
is24hVollständige Referenz - __CAPGO_KEEP_0__:
https://__CAPGO_KEEP_0__.com/Cap-go/__CAPGO_KEEP_1__-date-picker/
- GitHub https://github.com/Cap-go/capacitor-date-picker/
- Docs: /docs/plugins/date-picker/



