Date Picker

A calendar-based date selection component with support for constraints, custom formatting, and validation states.

Basic Date Picker

Select Date

With Default Value

Birthday

Today is pre-selected

With Helper Text

Appointment Date

Select your preferred appointment date

States

Event Date

Please select a valid date

Launch Date

Date Constraints

Start Date

Cannot select dates before tomorrow

Date of Birth

Must be at least 18 years old

Delivery Date

Available for next 7 days only

Disabled Specific Dates

Meeting Date

Weekends are disabled

Custom Date Format

Short Format

Long Format

ISO Format

Clear Button

Flexible Date

Click X to clear the selected date

Required Date

Date cannot be cleared

Required Field

Registration Date*

This field is required

Props

Name	Type	Default	Description
`label*`	`string`	-	Date picker label text
`placeholder`	`string`	`'Pick a date'`	Placeholder text when no date selected
`value`	`Date \| null`	-	Controlled date value
`defaultValue`	`Date`	-	Uncontrolled default date
`dateFormat`	`string`	`'PPP'`	Date format string (date-fns format)
`minDate`	`Date`	-	Minimum selectable date
`maxDate`	`Date`	-	Maximum selectable date
`disabledDates`	`Date[]`	`[]`	Array of specific dates to disable
`showClearButton`	`boolean`	`true`	Show X button to clear selected date
`disabled`	`boolean`	`false`	Whether date picker is disabled
`required`	`boolean`	`false`	Whether date is required (shows * indicator)
`error`	`string`	-	Error message to display
`helperText`	`string`	-	Helper text below date picker
`onChange`	`(date: Date \| null) => void`	-	Callback when date changes
`onBlur`	`() => void`	-	Callback when picker loses focus

Usage Guidelines

When to use

•For selecting single dates in forms (appointments, birthdays, deadlines)
•When users need a visual calendar to help them choose dates
•When date constraints need to be clearly communicated (min/max dates)
•When specific dates need to be disabled (weekends, holidays, blocked dates)

Best practices

•Use clear labels that indicate what the date represents
•Provide helper text to clarify date constraints or format requirements
•Use minDate/maxDate to prevent selection of invalid dates
•Show clear button for optional date fields
•Use appropriate date format for your locale and context
•Disable the picker when the field is not editable in current context

Accessibility

•Keyboard accessible (Tab, Arrow keys, Enter, Escape)
•ARIA attributes: aria-invalid, aria-describedby, aria-required
•Error messages announced with aria-live
•Focus indicators visible on trigger and calendar
•Label properly associated with date picker
•Calendar navigation with arrow keys for date selection
•Disabled dates clearly indicated visually and programmatically
•Selected date highlighted with distinct styling

Do's and Don'ts

✓ Do

•Use date constraints (minDate/maxDate) to prevent invalid selections
•Provide clear helper text explaining date requirements
•Use appropriate date format for your locale
•Show clear button for optional date fields
•Disable specific dates when they're unavailable (weekends, holidays)

Appointment Date

Available dates start tomorrow

✗ Don't

•Don't allow selection of invalid dates without constraints
•Don't use vague labels like "Date" or "Pick date"
•Don't use date picker for very distant past dates (use text input)
•Don't hide date format requirements - show them in helper text
•Don't force users to clear required date fields

Date

Related Components

Time Picker

For selecting specific times

Input

For text-based date entry

Select

For choosing from predefined options