Date picker

Choose a date without losing context.

$npx shadcn@latest add @silicon-ui/date-picker

datefield

Installation

$npx shadcn@latest add @silicon-ui/date-picker

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/date-picker/date-picker.tsx
- components/silicon-ui/date-picker/date-picker.module.css
- components/silicon-ui/calendar/calendar.tsx shared
- components/silicon-ui/lib/use-today.ts shared
- components/silicon-ui/calendar/calendar.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { DatePicker } from "@/components/silicon-ui/date-picker/date-picker";

Prop	Type	Default
`label*`	`string`	—
`value`	`Date`	—
`onChange`	`(date: Date \| undefined) => void`	—
`description`	`string`	—
`placeholder`	`string`	`"Select a date"`
`minDate`	`Date`	—
`maxDate`	`Date`	—
`disabledDates`	`CalendarDateMatcher`	—
`locale`	`string`	`"en-US"`
`format`	`Intl.DateTimeFormatOptions`	`{ month: "short", day: "numeric", year: "numeric" }`
`showToday` Adds a Today button to the calendar header.	`boolean`	—

Also accepts the props of ButtonHTMLAttributes<HTMLButtonElement>, except value, onChange.