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

Datumswahl

Nativ für Datum, Uhrzeit, Datum-Uhrzeit, Jahr-Monat und Bereichswahl für iOS, Android und Web

Richtlinie

Tutorial zum Datumswähler

Auf Gerät testen

Laden Sie die Capgo-App herunter, dann scannen Sie das QR-code-Code.

Date Picker Plugin Vorschau QR code

Mit @capgo/capacitor-date-picker

@capgo/capacitor-date-picker fügt native Datum, Uhrzeit, Datum-Uhrzeit, Jahr-Monat und Bereichsdaten auswählern zu Capacitor-Apps auf iOS und Android hinzu, mit einer passenden Web-Fallback-Option.

Dies ist Capgo's gehaltene Alternative zu @capacitor-community/date-picker. Wir 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

Natives Auswahlmenü Demo

iOS Android
Animierter iOS-Demo von @capgo/capacitor-date-picker, der sich öffnet, eine Datum auswählt und schließt Animierter Android-Demo von @capgo/capacitor-date-picker, der sich öffnet, eine Datum auswählt und schließt

Native Picker Screenshots

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

Ein Datum wählen

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);

Ein Zeitpunkt wählen

const result = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
  title: 'Select time',
});

Ein Zeitraum 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);

Ein aktiver Picker schließen

await DatePicker.hide();

Was dies repariert

  • Capacitor 8 unterstützt.
  • Web-Implementierung mit demselben present() API.
  • Programmatisch hide().
  • Unterstützung für Dialogtitel.
  • iOS rotation-sichere Layout, Länder-Handling und yearAndMonth Modus.
  • Sicherere Datumserkennung und -handling ohne Zeitzone.
  • Android eingebaute Optionen. is24h, Dialog-Layout-Verwaltung und Dialog-UI-Thread-Verwaltung.
  • Schritt-für-Schritt-Einstellungen und Auswahl eines Zeitraums.

Vollständige Referenz