Zum Hauptinhalt springen
Zurück zu plugins
@capgo/capacitor-date-picker
Anleitung
@capgo/capacitor-date-picker

Datumsauswahl

Ein natürlicher Datums-, Zeit-, Datum-Zeit-, Jahr-Monat- und Bereichswähler für iOS, Android und Web

Anleitung

Tutorial zum Datumswähler

Testen auf Gerät

Herunterladen Sie die Capgo-App, dann scannen Sie die QR-code.

Datumsauswahl-Plugin-Vorschau-QR code

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
Animierte iOS-Demo von @capgo/capacitor-datumsauswahl, die sich öffnet, eine Datei auswählt und sich schließt Animierte Android-Demo von @capgo/capacitor-datumsauswahl, die sich öffnet, eine Datei auswählt und sich schließt

Nativ-Picker-Bildschirme

iOS Android
iOS-Bildschirmfoto von @capgo/capacitor-date-picker, das den nativen Datumsauswahl-Assistenten zeigt Android-Bildschirmfoto von @capgo/capacitor-date-picker, das den nativen Datumsauswahl-Assistenten zeigt

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. yearAndMonth Bessere 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/