Date Picker
Calendar popup for selecting a single date. Supports event dots, min/max date boundaries, label, placeholder, and a Today shortcut.
import
{ DatePicker } from "@pepulux/ui"Default — no selection
Click the trigger button to open the calendar. Select a date and click Apply.
With pre-selected value
Pass a Date object to start with a date already selected.
With event dots
Pass eventDates to display a small dot under days that have events. Useful for scheduling interfaces.
Dots appear on Jun 25, 26, and 30
Opens by default
Pass defaultOpen={true} to show the calendar immediately on mount — useful in inline layouts.
October 2026
MoTuWeThFrSaSu
Check-in date — custom placeholder
Custom placeholder text for contextual labeling.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | — | Controlled selected date. Pass null for no selection. |
| onChange | (date: Date) => void | — | Called when user clicks Apply in the calendar |
| placeholder | string | "Select date" | Trigger button text when no date is selected |
| eventDates | Date[] | [] | Dates to mark with a dot indicator in the calendar grid |
| defaultOpen | boolean | false | Open the calendar popup on initial render |
| className | string | — | Additional CSS classes on the wrapper |