Komponen / Form & input
DatePicker
Field tanggal tertutup dengan kalender pop-up: tanggal PO, jatuh tempo termin, tanggal kick-off. Bisa diketik langsung ("29/09/2026") atau dipilih dari kalender yang minggunya mulai Senin.
Import
tsx
import { DatePicker } from '@divistant/circca-react';Props
Ref menunjuk <input> teks. Juga menerima atribut <input> lain (autoFocus, onBlur, aria-label, …).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | Date | null | — | Tanggal terpilih (terkendali). Jam diabaikan. |
| defaultValue | Date | null | null | Tanggal awal (tak terkendali). |
| onValueChange | (value: Date | null) => void | — | Dipanggil saat tanggal disimpan (Pilih/Enter di kalender, atau teks valid saat field ditinggalkan/Enter). |
| min | Date | — | Tanggal paling awal yang boleh dipilih; tombol bulan sebelumnya nonaktif di bulan ini. |
| max | Date | — | Tanggal paling akhir yang boleh dipilih. |
| isDateDisabled | (date: Date) => boolean | — | Nonaktifkan tanggal tertentu: akhir pekan, hari libur, tanggal tutup buku. |
| today | Date | — | Patokan "hari ini" (penanda & tombol Hari ini). Isi di contoh/tes agar deterministik; default tanggal perangkat. |
| size | 'sm' | 'md' | 'md' | Tinggi 24 / 28. |
| placeholder | string | 'hh/bb/tttt' | Petunjuk format saat kosong. |
| name | string | — | Nama field form HTML; nilai dikirim sebagai `YYYY-MM-DD`. |
| invalid | boolean | false | Tampilan error. Otomatis true bila FormField punya `error`. |
| disabled | boolean | false | Nonaktif. Otomatis mengikuti FormField. |
| readOnly | boolean | false | Hanya baca (dokumen sudah submit) — teks kontras penuh, kalender tidak bisa dibuka. |
| inputClassName | string | — | Kelas untuk elemen <input> di dalam kotak. |
| className | string | — | Kelas tambahan untuk kotak field (mis. `w-60` mengikuti lebar Figma 240). |
Sumber
Kode komponen ada di packages/react/src/components/date-picker. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.