Langsung ke konten utama
@capgo/capacitor-date-picker API Perangkat Open source

Pemilih Tanggal plugin Capacitor

Picker tanggal, waktu, tanggal-waktu, tahun-bulan, dan rentang native untuk iOS, Android, dan Web

Instal

bun add @capgo/capacitor-date-picker bunx cap sync
npm, pnpm atau yarn
  • npm install @capgo/capacitor-date-picker
  • pnpm add @capgo/capacitor-date-picker
  • yarn add @capgo/capacitor-date-picker

Panduan

Cara menggunakan Date Picker di Capacitor

Tes di perangkat

Download aplikasi Capgo, lalu scan QR code.

QR code pratinjau plugin Date Picker

Menggunakan @capgo/capacitor-date-picker

@capgo/capacitor-date-picker menambahkan picker native untuk tanggal, waktu, tanggal-waktu, tahun-bulan, dan range ke aplikasi Capacitor di iOS dan Android, dengan fallback Web yang setara.

Ini adalah alternatif yang dikelola Capgo untuk @capacitor-community/date-picker. Kami mendengarkan laporan komunitas, memperbaiki masalah dengan cepat, dan merilis update alih-alih membiarkan isu GitHub yang sudah lama terbuka.

Instal

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

Demo Native Picker

iOS Android
Demo animasi iOS saat @capgo/capacitor-date-picker dibuka, memilih tanggal, dan ditutup Demo animasi Android saat @capgo/capacitor-date-picker dibuka, memilih tanggal, dan ditutup

Screenshot Native Picker

iOS Android
Screenshot iOS @capgo/capacitor-date-picker yang menampilkan native date picker Screenshot Android @capgo/capacitor-date-picker yang menampilkan native date picker

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

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 Picker yang Aktif

await DatePicker.hide();

Apa yang Diperbaiki

  • Dukungan Capacitor 8.
  • Implementasi web dengan present() API.
  • Programatik hide().
  • Dukungan judul dialog.
  • Layout iOS yang aman saat rotasi, penanganan locale, dan yearAndMonth mode.
  • Parsing tanggal yang lebih aman dan penanganan timezone khusus tanggal.
  • Opsi bersarang Android, is24hpenanganan layout dialog, dan penanganan dialog di UI thread.
  • Interval menit dan pemilihan rentang tanggal.

Referensi Lengkap

FAQ

FAQ plugin Date Picker

Bagaimana cara install plugin Date Picker di aplikasi Capacitor?

Jalankan "bun add @capgo/capacitor-date-picker" (atau "npm install @capgo/capacitor-date-picker"), lalu jalankan "bunx cap sync" agar proyek iOS dan Android mendeteksi code native. Import dari "@capgo/capacitor-date-picker" di dalam code aplikasi Anda.

Apakah @capgo/capacitor-date-picker mendukung React, Vue, dan Angular?

Ya. Date Picker adalah package Capacitor, jadi bisa digunakan dengan framework web apa pun yang berjalan di dalam Capacitor, termasuk Ionic, React, Vue, Angular, Svelte, dan JavaScript murni.

Versi Capacitor mana yang didukung oleh @capgo/capacitor-date-picker?

Plugin Capgo mengikuti versi mayor Capacitor: gunakan versi mayor plugin yang sesuai dengan versi mayor Capacitor Anda (contoh: plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub mencantumkan versi yang masih di-maintain.

Apakah @capgo/capacitor-date-picker gratis dan open source?

Ya. Source code code tersedia secara publik di GitHub pada https://github.com/Cap-go/capacitor-date-picker/ dan paketnya gratis untuk diinstal dari npm. Laporan bug dan pull request sangat kami terima.

Bisakah saya memperbarui code yang menggunakan Date Picker tanpa review App Store?

Instalasi atau upgrade plugin akan mengubah native code, jadi butuh build store baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin bisa langsung dikirim lewat live updates Capgo.

Rilis perubahan Date Picker tanpa menunggu review aplikasi

Setelah plugin ada di build store Anda, live updates Capgo akan mengirim perubahan JavaScript, HTML, dan CSS ke pengguna dalam hitungan menit.

Mulai dengan Capgo