Date Picker
Date selection input with calendar
UI PrimitiveForm Inputs
Overview
Combines a Button trigger and a Calendar popover. The selected date is formatted using toLocaleDateString(). Supports min/max date constraints, month/year dropdowns, time selection, and date range mode.
Usage
import { DatePicker, DateRangePicker } from "@leanicon/web-builder-library";Variants
Default
With time selector
Month & year picker
Click the month/year label to open a 4-column grid for quick navigation.
Date range
Disabled
Notes
- The popover closes automatically when a date is selected (single mode) or when both dates are selected (range mode).
min/maxare memoized internally to avoid unnecessary re-renders.showTimeadds a time input below the calendar; the popover stays open after date selection so the user can adjust the time.captionLayout="grid"shows a custom 4-column month/year picker when clicking the caption label.captionLayout="dropdown"enables native month and year dropdowns for quick navigation.- Dark mode is handled via semantic tokens.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | Date | — | No | |
onValueChange | ((date: Date) => void) | — | No | |
min | Date | — | No | |
max | Date | — | No | |
placeholder | string | Pick a date | No | |
disabled | boolean | false | No | |
className | string | — | No | |
captionLayout | enum | label | No | Caption layout: `"label"` (default), `"dropdown"` (native selects), or `"grid"` (custom 4-column month picker). |
showTime | boolean | false | No | Show a time input below the calendar. |
aria-invalid | boolean | — | No |