Date Picker

A button that opens a calendar in a popover.

$ pnpm dlx shadcn@latest add https://dashral.com/r/date-picker.json

Due date

When the invoice has to be paid.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/date-picker.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/date-picker

Usage

example.tsx

1import { DatePicker } from "@/components/dashral/date-picker"
2
3<DatePicker label="Due date" disabledDays={{ before: new Date() }} />

Examples

Locale and disabled days

Format the button for any locale; disabledDays blocks dates with a matcher.

Delivery date

Booking a call

Weekends and past days off; the day's free times appear once you pick one.

Book a demo

30 minutes · Google Meet

Day

Time

Pick a day to see the free times.

API reference

DatePicker

Prop	Type	Default
`value / defaultValue`	`Date` Picked day, controlled or initial.	—
`onValueChange`	`(value: Date \| undefined) => void` Called with the new value.	—
`placeholder`	`string` Shown before a day is picked.	`"Pick a date"`
`locale / formatOptions`	`string / Intl.DateTimeFormatOptions` How the picked day is written.	`LocaleProvider's / { dateStyle: "medium" }`
`disabledDays`	`Matcher` Days that can't be picked, e.g. { before: new Date() }.	—
`disabled`	`boolean` The whole picker can't be used.	`false`
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, trigger, content }` Classes for each part.	—

Keyboard

Keys	Action
`Enter`or`Space`	Open the calendar
`Arrow keys`or`Page Up`or`Page Down`	Move by day, week or month in the calendar
`Enter`	Pick and close
`Escape`	Close

Accessibility

The calendar takes focus when it opens and gives it back to the button when it closes.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.