Lompat ke Konten Utama
Kembali ke plugin
@capgo/capacitor-date-picker
Tutorial
@capgo/capacitor-date-picker

Pemilih Tanggal

Pilih tanggal, waktu, tanggal-waktu, tahun-bulan, dan pilihan rentang untuk iOS, Android, dan Web

Petunjuk

Tutorial Pilih Tanggal

Tes di perangkat

Unduh aplikasi Capgo terlebih dahulu, kemudian scan kode QR code.

Tautan QR pratinjau plugin Pilih Tanggal code

Menggunakan @capgo/capacitor-pilih-tanggal

@capgo/capacitor-date-picker menambahkan pilih tanggal asli, waktu, tanggal-waktu, tahun-bulan, dan rentang ke aplikasi Capacitor di iOS dan Android, dengan fallback Web yang sesuai.

Ini adalah alternatif yang dipelihara Capgo @capacitor-community/date-pickerKami mendengarkan laporan komunitas, memperbaiki masalah dengan cepat, dan mengirimkan update daripada meninggalkan masalah GitHub yang berdiri sendiri terbuka.

Pasang

npm install @capgo/capacitor-date-picker
npx cap sync

Demo Pilih Nama Asli

iOS Android
Demo animasi iOS dari @capgo/capacitor-pilih-tanggal membuka, memilih tanggal, dan menutup Demo animasi Android dari @capgo/capacitor-pilih-tanggal membuka, memilih tanggal, dan menutup

Gambar Layar Pilih Tanggal

iOS Android
Gambar layar iOS dari @capgo/capacitor-pilih-tanggal menampilkan pilih tanggal native Gambar layar Android dari @capgo/capacitor-pilih-tanggal menampilkan pilih tanggal native

Pilih Tanggal

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

Pilih Waktu

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

Pilih Rentang Tanggal

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

Tutup Pilih Aktif

await DatePicker.hide();

Apa Ini Yang Diperbaiki

  • Capacitor 8 dukungan.
  • Implementasi Web dengan yang sama present() API.
  • Programatik hide().
  • Judul Dialog dukungan.
  • Tata Letak iOS yang aman dari rotasi, pengelolaan lokasi, dan yearAndMonth mode.
  • Pemrosesan tanggal yang lebih aman dan pengelolaan zona waktu tanggal-saja.
  • Android nested options, is24h, pengelolaan layout dialog, dan pengelolaan UI-thread dialog.
  • Langkah-langkah kecil dan pilihan rentang tanggal.

Referensi Lengkap