Date Picker

Pemilih tanggal berbasis kalender 42-grid dengan navigasi bulan, min/max date, dan locale ID/EN.

import { DatePicker } from "@naraya/ui";

Examples

Controlled

Selected: Wed Jun 03 2026

const [date, setDate] = useState<Date | null>(new Date());
<DatePicker value={date} onChange={setDate} />

Locale and range limit

const [rangeDate, setRangeDate] = useState<Date | null>(new Date(2026, 5, 15));

<DatePicker
  locale="en"
  value={rangeDate}
  onChange={setRangeDate}
  minDate={new Date(2026, 0, 1)}
  maxDate={new Date(2026, 11, 31)}
/>

Disabled

<DatePicker disabled value={new Date()} />

Props

Prop	Type	Default	Description
value	`Date \| null`	—	Tanggal terpilih controlled.
onChange	`(date: Date \| null) => void`	—	Callback saat tanggal berubah.
placeholder	`string`	`"Pilih tanggal"`	Placeholder trigger.
minDate	`Date`	—	Tanggal minimum yang bisa dipilih.
maxDate	`Date`	—	Tanggal maksimum yang bisa dipilih.
locale	`"id" \| "en"`	`"id"`	Locale label bulan/hari.
disabled	`boolean`	`false`	Nonaktifkan picker.

Tokens Used

--bg-surface

Trigger/panel background

--border-subtle

Border trigger/panel/day

--color-primary

Selected day accent

--text-muted

Outside month/day meta text

Date Picker

Examples

Props

Tokens Used

Accessibility

Related