uix-uiDate picker
Month calendar. 2 types.
October 2026
import * as React from "react";
import { DatePicker } from "@/components/ui/date-picker";
export default function Example() {
const [range, setRange] = React.useState<{ from?: Date; to?: Date }>({ from: new Date(2026, 9, 18) });
return <DatePicker type="single" month={new Date(2026, 9, 1)} value={range} onValueChange={setRange} />;
}
Installation
$ npx uix-ui@latest add date-pickerThis copies the file into components/ui/date-picker.tsx in your project. npx shadcn@latest add @uix/date-picker works too.
Usage
import { DatePicker } from "@/components/ui/date-picker";
<DatePicker type="range" month={new Date(2026, 9, 1)} defaultValue={{ from: new Date(2026, 9, 12), to: new Date(2026, 9, 16) }} weekStartsOn={0} />
Examples
Date range
October 2026
import { DatePicker } from "@/components/ui/date-picker";
export default function Example() {
return <DatePicker type="range" month={new Date(2026, 9, 1)} defaultValue={{ from: new Date(2026, 9, 12), to: new Date(2026, 9, 16) }} weekStartsOn={0} />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | single | range | "single" | |
value | DateRange | – | Selected day, or the start and end of a range (controlled). |
defaultValue | DateRange | – | |
onValueChange | (value: DateRange) => void | – | |
month | Date | – | Month shown first. |
weekStartsOn | 0 | 1 | 1 | 0 = Sunday, 1 = Monday. |
locale | string | – | BCP 47 tag for month and weekday names. |
showFooter | boolean | false | Summary and Cancel / Apply buttons under the calendar. |
onCancel | () => void | – | |
onApply | (value: DateRange) => void | – |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx