Panduan
Tutorial Pilih Tanggal
Menggunakan @capgo/capacitor-pemilih-tanggal
@capgo/capacitor-date-picker menambahkan pemilih tanggal asli, waktu, tanggal-waktu, tahun-bulan, dan rentang ke Capacitor aplikasi di iOS dan Android, dengan fallback Web yang sesuai.
Ini adalah alternatif yang dipelihara Capgo @capacitor-community/date-picker. Kami mendengarkan laporan komunitas, memperbaiki masalah dengan cepat, dan mengirimkan pembaruan bukannya meninggalkan masalah GitHub yang berdiri lama terbuka.
Install
npm install @capgo/capacitor-date-picker
npx cap sync
Demo Pemilih Asli
| iOS | Andoid |
|---|---|
![]() |
![]() |
Gambar Layar Pilih Tanggal Asli
| Pilih Tanggal di iOS | Pilih Tanggal di Android |
|---|---|
![]() |
![]() |
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.
- Layout rotasi aman iOS, pengelolaan lokasi, dan mode.
yearAndMonthPengolahan tanggal yang lebih aman dan pengelolaan zona waktu tanggal saja. - Pilihan opsi yang lebih aman Android, pengelolaan layout dialog, dan pengelolaan dialog UI-thread.
- Pilihan langkah menit dan pilihan rentang tanggal.
is24hReferensi Lengkap - __CAPGO_KEEP_0__ 8 support.
Web implementation with the same
- Pilih GitHub: https://github.com/Cap-go/capacitor-date-picker/
- Referensi: /docs/plugins/date-picker/



