Panduan Memulai

Salin prompt setup yang berisi langkah install dan panduan markdown lengkap untuk plugin ini.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Instal

Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Lalu gunakan prompt berikut:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.

Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:

bun add @capgo/capacitor-date-picker
bunx cap sync

Impor

import { DatePicker } from '@capgo/capacitor-date-picker';

Kesalahan umum

Sembunyikan di antara hadiah: panggil hide() apakah user bisa membuka picker lain saat satu picker sedang tampil.
String ISO: pass date, min, dan max dalam format string yang didokumentasikan untuk format opsi.
Validasi Range: presentRange() juga harus menerapkan aturan bisnis di sisi server, karena user bisa memilih tanggal ekstrem saat offline.

Pilih Tanggal

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',
});

console.log(result.value);

Pilih Tanggal dan Waktu

const result = await DatePicker.present({
  mode: 'dateAndTime',
  date: '2026-05-27T14:30:00',
  format: "yyyy-MM-dd'T'HH:mm:ss",
  title: 'Select date and time',
});

Pilih Bulan

const result = await DatePicker.present({
  mode: 'yearAndMonth',
  date: '2026-05-01',
  format: 'yyyy-MM',
  title: 'Select month',
});

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, range.value);

Sembunyikan Picker

await DatePicker.hide();

Opsi Platform

await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  title: 'Select date',
  ios: {
    style: 'inline',
    theme: 'light',
  },
  android: {
    theme: 'light',
  },
});

Common Options

Opsi	Deskripsi
`mode`	`date`, `time`, `dateAndTime`, `yearAndMonth`, `countDownTimer`, atau `range`.
`date`	Nilai awal yang dipilih.
`min` / `max`	Nilai minimum dan maksimum yang dapat dipilih.
`format`	Format output. Mendukung ISO, Java/Unicode, dan format umum gaya Moment.
`title`	Judul dialog.
`locale`	Locale yang digunakan oleh native picker jika didukung.
`timezone`	Timezone yang digunakan untuk parsing dan formatting.
`is24h`	Gunakan format waktu 24 jam.
`minuteStep`	Interval menit pada time picker.
`doneText` / `cancelText`	Label aksi kustom.

Aplikasi Contoh

Repositori ini menyertakan contoh aplikasi Capacitor yang membuka native date picker, time picker, range picker, hide(), dan pemanggilan versi plugin.

iOS	Android

Referensi API

Referensi lengkap API tersedia di README package dan definisi TypeScript: