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.
Tanggal PO customer
Nilai `Date | null` terkendali lewat `value`/`onValueChange`. Field menampilkan format pendek "29 Sep 2026"; ikon kalender (atau ↓ di field) membuka kalender. `max` mencegah tanggal PO di masa depan.
Tersimpan: Selasa, 29 September 2026
import { useState } from 'react';
import { DatePicker, FormField, formatDate } from '@divistant/circca-react';
// "Hari ini" dipatok agar contoh deterministik; di aplikasi biarkan kosong (tanggal perangkat).
const HARI_INI = new Date(2026, 9, 8);
export default function Example() {
const [tanggalPo, setTanggalPo] = useState<Date | null>(new Date(2026, 8, 29));
return (
<div className="grid max-w-xs gap-4">
<FormField
label="Tanggal PO customer"
required
helperText={tanggalPo ? `Tersimpan: ${formatDate(tanggalPo, { style: 'full' })}` : 'Ketik 29/09/2026 atau pilih dari kalender.'}
>
<DatePicker value={tanggalPo} onValueChange={setTanggalPo} max={HARI_INI} today={HARI_INI} />
</FormField>
</div>
);
}Batas & tanggal nonaktif
Jatuh tempo termin tidak boleh sebelum tanggal PO (`min`) dan bukan akhir pekan (`isDateDisabled`). Hari nonaktif tampil pudar dan dicoret. `name` mengirim nilai `YYYY-MM-DD` lewat input tersembunyi.
Paling cepat tanggal PO (29 Sep 2026), paling lambat 31 Des 2026; akhir pekan tidak tersedia.
import { useState } from 'react';
import { DatePicker, FormField } from '@divistant/circca-react';
const HARI_INI = new Date(2026, 9, 8);
const TANGGAL_PO = new Date(2026, 8, 29);
const akhirPekan = (d: Date) => d.getDay() === 0 || d.getDay() === 6;
export default function Example() {
const [jatuhTempo, setJatuhTempo] = useState<Date | null>(null);
return (
<div className="grid max-w-xs gap-4">
<FormField
label="Jatuh tempo termin 1"
required
helperText="Paling cepat tanggal PO (29 Sep 2026), paling lambat 31 Des 2026; akhir pekan tidak tersedia."
>
<DatePicker
value={jatuhTempo}
onValueChange={setJatuhTempo}
min={TANGGAL_PO}
max={new Date(2026, 11, 31)}
isDateDisabled={akhirPekan}
today={HARI_INI}
name="jatuh_tempo_termin_1"
/>
</FormField>
</div>
);
}Error, read-only, nonaktif & Small
Semua state diturunkan dari FormField. Read-only (dokumen sudah diajukan) tetap kontras penuh tanpa ikon kalender. Small (24) untuk filter dan baris tabel.
Tanggal kick-off tidak boleh sebelum tanggal PO (29 Sep 2026).
PO sudah diajukan — tidak dapat diubah.
Aktif setelah item lisensi dipilih.
Small — untuk filter & baris tabel.
import { DatePicker, FormField } from '@divistant/circca-react';
const HARI_INI = new Date(2026, 9, 8);
export default function Example() {
return (
<div className="grid gap-4 sm:grid-cols-2">
<FormField label="Tanggal kick-off" error="Tanggal kick-off tidak boleh sebelum tanggal PO (29 Sep 2026).">
<DatePicker defaultValue={new Date(2026, 8, 21)} today={HARI_INI} />
</FormField>
<FormField label="Tanggal PO customer" readOnly helperText="PO sudah diajukan — tidak dapat diubah.">
<DatePicker defaultValue={new Date(2026, 8, 29)} today={HARI_INI} />
</FormField>
<FormField label="Tanggal perpanjangan lisensi" disabled helperText="Aktif setelah item lisensi dipilih.">
<DatePicker today={HARI_INI} />
</FormField>
<FormField label="Dari tanggal" helperText="Small — untuk filter & baris tabel.">
<DatePicker size="sm" defaultValue={new Date(2026, 9, 1)} today={HARI_INI} />
</FormField>
</div>
);
}