Lompat ke Konten Utama
Kembali ke plugin
@capgo/capacitor-pilih-tanggal
Tutorial
@capgo/capacitor-pilih-tanggal

Pilih Tanggal

Pilih tanggal native, waktu, tanggal-waktu, tahun-bulan, dan 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-picker. Kami mendengarkan laporan komunitas, memperbaiki masalah dengan cepat, dan mengirimkan update daripada meninggalkan masalah GitHub yang berdiri lama terbuka.

Install

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

Demo Pilih Tanggal Asli

iOS Android
Animasi demo iOS @capgo/capacitor-pilih-tanggal membuka, memilih tanggal, dan menutup Animasi demo Android @capgo/capacitor-pilih-tanggal membuka, memilih tanggal, dan menutup

Tampilan Pilih Tanggal

iOS Android
Tampilan screenshot iOS dari @capgo/capacitor-pilih-tanggal menampilkan pilih tanggal native Tampilan screenshot 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

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 yang Diperbaiki

  • Capacitor 8 mendukung.
  • Implementasi web dengan yang sama present() API.
  • Programatik hide().
  • Judul dialog dukungan.
  • iOS rotasi aman layout, pengaturan lokasi, dan mode. yearAndMonth Pemrosesan tanggal yang lebih aman dan pengaturan zona waktu tanggal-saja.
  • Android nested options, pengaturan layout dialog, dan pengaturan UI-thread dialog.
  • Langkah-langkah kecil dan pemilihan rentang tanggal. is24hReferensi Lengkap
  • __CAPGO_KEEP_0__:

https://__CAPGO_KEEP_0__.com/Cap-go/__CAPGO_KEEP_1__-date-picker/