DatePicker & Calendar Component
A dependency-free date picker: an Input-style trigger opening a popover Calendar. The Calendar is also exported standalone for inline use.
Import
1import { DatePicker, Calendar } from "@neuctra/ui";DatePicker — Basic Usage
No date selected
Ranges & Disabled Dates
Constrain with minDate/maxDate or an isDateDisabled callback (e.g. weekends).
Weekdays only, starting today
Inline Calendar
Use Calendar directly when the grid should always be visible.
Props
All available props for the DatePicker & Calendar component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | Date | null | null | Controlled / uncontrolled selection (both components) |
| onChange | (date) => void | — | DatePicker: Date | null · Calendar: Date |
| placeholder | string | "Pick a date" | Trigger text while empty |
| formatDate | (date: Date) => string | toLocaleDateString | Display formatting |
| disabled | boolean | false | Disables the trigger |
| clearable | boolean | false | Inline clear button while a date is set |
| calendarProps | Omit<CalendarProps, "value" | "defaultValue" | "onChange" | "className"> | — | minDate, maxDate, isDateDisabled, weekStartsOn, locale… |
| label / error / helperText | string | — | Standard field furniture |
| size | "sm" | "md" | "lg" | "md" | Trigger height |
| Calendar.weekStartsOn | 0 | 1 | 1 | Sunday- or Monday-first weeks |
| Calendar.locale | string | browser | Locale for month/weekday names |
| wrapperClassName | string | — | Styles the outermost wrapper. |
| labelClassName | string | — | Styles the field label. |
| iconClassName | string | — | Styles the calendar icon in the trigger. |
| textClassName | string | — | Styles the displayed date text. |
| clearButtonClassName | string | — | Styles the clear button. |
| clearIconClassName | string | — | Styles the icon inside the clear button. |
| panelClassName | string | — | Styles the popover panel containing the calendar. |
| helperClassName | string | — | Styles the helper/error text below the trigger. |
| Calendar.headerClassName | string | — | Styles the month header row (prev/next buttons and label). |
| Calendar.navButtonClassName | string | — | Styles the previous/next month buttons. |
| Calendar.monthLabelClassName | string | — | Styles the current month/year label. |
| Calendar.weekdaysClassName | string | — | Styles the weekday header row. |
| Calendar.weekdayClassName | string | — | Styles each weekday header cell. |
| Calendar.daysClassName | string | — | Styles the day grid container. |
| Calendar.dayClassName | string | — | Styles each individual day cell. |
Accessibility
- The trigger exposes aria-haspopup="dialog" / aria-expanded; the panel is a labelled dialog closed by Escape or outside click.
- Every day button has a full-date aria-label; today is marked aria-current and the selection aria-pressed.
- The month grid always renders six rows, so the popover height never jumps while navigating.
Frequently Asked Questions
How do I install and import the DatePicker component?
Install the @neuctra/ui package, then import it with: import { DatePicker } from "@neuctra/ui";
What variants and sizes does DatePicker support?
DatePicker supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the DatePicker component accessible?
DatePicker is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.