Mokri

Preview

<> import.ts

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

<> component.tsx

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

<DatePicker />

A button-triggered calendar picker with animated dropdown.

<> import.ts

import { DatePicker, DatePickerPresets } from "@/components/ui/date-picker"

Prop	Type	Default	Description
`value`	`Date`	—	Controlled selected date
`onChange`	`(date: Date) => void`	—	Called on date select
`placeholder`	`string`	`"Select a date..."`	Trigger placeholder
`className`	`string`	`""`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Control trigger sizing
`disabled`	`boolean`	`false`	Disable interactions
`minDate`	`Date`	—	Minimum selectable date
`maxDate`	`Date`	—	Maximum selectable date
`showToday`	`boolean`	`true`	Show Go to Today and today highlight

<> example.tsx

// Basic
<DatePicker />

<> example.tsx

// Controlled
<DatePicker value={date} onChange={setDate} />

small

Small size

medium

Medium size

large

Large size