Skip to content
nexubDesign System
v2.4.0

Components · Form & Input

Date Picker

StableSince v0.0.1

Calendar date picker with text input.

import { DatePicker } from '@nexub/react';

Examples

Default

With value

With constraints

Props

Props
PropTypeDefaultDescription
valueDate | undefined—Controlled selected date value.
onChange(date: Date | undefined) => void—Callback invoked when the selected date changes.
localeLocale (date-fns)—Month and weekday names, week start and the trigger format. Defaults to the NexubProvider dateLocale; the calendar also follows the provider dir, so arrows flip in RTL.
placeholderstring'Pick a date'Placeholder text displayed in the input when no date is selected.
disabledbooleanfalseDisables the date picker input and calendar.
minDateDate—Earliest selectable date. Dates before this are greyed out.
maxDateDate—Latest selectable date. Dates after this are greyed out.
formatstring'dd/MM/yyyy'Date format string for the text input display.
aria-labelstring—Field name for screen readers; the selected value is appended.
idstring—Id for the trigger button, e.g. to pair with a <label htmlFor>.
errorstring—Error message displayed below the input.