Date Picker
NewPro
A popover calendar with months that slide, full keyboard grid navigation, min and max dates and a range mode. No date library, and dates stay plain YYYY-MM-DD strings.
Customize
Mode
Week starts on
Limit dates
#ff784f
When to use it
- Booking forms for a stay, a session or a delivery slot
- Date range filters on reports and dashboards
- Scheduling a launch, an event or a post
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 697
Installation
Date Picker is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy date-picker.tsx into components/ui and run npm install motion.
Usage
import { DatePicker } from "@/components/ui/date-picker";
<DatePicker
mode="range"
label="Playtest window"
name="window"
min="2027-03-01"
weekStartsOn={1}
onChange={({ start, end }) => setWindow({ start, end })}
/>Props
22 properties| Property | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | One date, or a start and an end. |
| value | string | null | DateRange | — | Controlled value: a YYYY-MM-DD string, or { start, end } in range mode. Leave it out to let the picker manage itself. |
| defaultValue | string | null | DateRange | — | Starting value when uncontrolled. |
| onChange | (value) => void | — | Called with the same shape as value. |
| min | string | — | Earliest date that can be picked, as YYYY-MM-DD. |
| max | string | — | Latest date that can be picked, as YYYY-MM-DD. |
| label | string | — | Visible label above the field. |
| hint | string | — | Helper text under the field while there is no error. |
| error | boolean | string | — | Marks the field invalid. A string is shown as the message. |
| locale | string | "en-US" | BCP 47 locale for dates, months and weekdays. |
| weekStartsOn | 0 to 6 | 0 | First column of the calendar: 0 is Sunday, 1 is Monday. |
| color | string | "#ff784f" | Accent for the selection and focus. |
| disabled | boolean | false | Blocks interaction and leaves the field out of form data. |
| required | boolean | — | Native form validation. A range counts as filled once it has both dates. |
| name | string | — | Form field name. A range submits two entries under the same name. |
| id | string | — | Base id for the label and the field. |
| defaultOpen | boolean | false | Starts with the calendar open. |
| inline | boolean | false | Renders the calendar in the page, with no field or popover. |
| placement | "auto" | "bottom" | "top" | "auto" | Side of the field the calendar opens on. Auto picks the side with room. |
| closeOnSelect | boolean | true | Closes the calendar once the date or range is complete. |
| labels | Partial<DatePickerLabels> | — | Replaces the built-in text, for translations. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion