Ke Konten Utama
@capgo/capacitor-pilih-tanggal API Perangkat Terbuka Sumber

Pilih Tanggal Plugin Capacitor

Pilih Tanggal, Waktu, Tanggal-Waktu, Tahun-Bulan, dan Rentang Pilih 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 Pilih Tanggal di Capacitor

Uji coba di perangkat

Unduh aplikasi Capgo, kemudian scan kode QR code.

Pratinjau QR Tanggal Pilih code

Menggunakan @capgo/capacitor-tanggal-pilih

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

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

Install

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

Demo Pilih 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 Asli

iOS Android
Gambar Layar iOS @capgo/capacitor-pilih tanggal menampilkan pilih tanggal asli Gambar Layar Android @capgo/capacitor-pilih tanggal menampilkan pilih tanggal asli

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 Tanggal Aktif

await DatePicker.hide();

Apa Yang Diperbaiki

  • Capacitor 8 dukungan.
  • Implementasi web dengan yang sama. present() API.
  • Programatik hide().
  • Judul dialog dukungan.
  • Tata letak iOS yang aman dari rotasi, pengaturan lokasi, dan yearAndMonth mode.
  • Pemrosesan tanggal lebih aman dan pengaturan zona waktu hanya tanggal.
  • Android opsi yang terdalam, is24hPengaturan layout dialog, pengelolaan dialog, dan pengaturan dialog UI.
  • Langkah-langkah menit dan pilihan rentang tanggal.

Implementasi web dengan yang sama.

FAQ

FAQ Pilihan Tanggal

Bagaimana cara saya menginstal plugin Pilih Tanggal di aplikasi Capacitor saya?

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

Apakah @capgo/capacitor-date-picker dapat digunakan dengan React, Vue, dan Angular?

Ya. Pilihan Tanggal adalah paket Capacitor, sehingga dapat digunakan dengan framework web apa pun yang berjalan di dalam Capacitor, termasuk Ionic, React, Vue, Angular, Svelte, dan JavaScript biasa.

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

Capgo plugin mengikuti versi mayor Capacitor: gunakan versi plugin mayor yang sesuai dengan versi mayor Capacitor (misalnya plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub menampilkan versi yang dipertahankan.

Apakah @capgo/capacitor-date-picker gratis dan terbuka sumber?

Ya. Sumber code ini terbuka di GitHub di https://github.com/Cap-go/capacitor-date-picker/ dan paket ini gratis untuk diinstal dari npm.

Apakah saya bisa memperbarui code yang menggunakan Tanggal Pilih tanpa melalui tinjauan App Store?

Pemasangan atau pembaruan plugin ini mengubah native code, sehingga memerlukan pembangunan toko baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin ini bisa berlayar dengan Capgo live update.

Kirim perubahan Pilih Tanggal tanpa menunggu tinjauan aplikasi

Setelah plugin masuk ke dalam toko Anda, Capgo pembaruan hidup memasukkan perubahan JavaScript, HTML, dan CSS Anda ke pengguna dalam menit.

Mulai dengan Capgo