Date Picker

A completely custom, dependency-free Date Picker component. Native HTML <input type="date"> elements vary wildly between browsers and operating systems, often breaking the visual consistency of your application.

This component solves that by using native JavaScript Date math to construct a flawless, customizable calendar dropdown that perfectly matches your UI kit's visual variants.

The calendar dropdown highlights today's date subtly and the selected date strongly, and it opens with plain absolute positioning and CSS transitions — no popover library required.

Date picker

Control it withvalue: and onChange — both work with a plain Date | null.
placeholder: is the trigger text while nothing is selected, defaulting to Pick a date.
label: renders a bold label above the input and helperText a subtle line below it.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Date Picker

npx shadcn@latest add @algorize-ui/date-picker

components/custom/blocks/DatePickerBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Date Picker to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

time-picker is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/time-picker

Examples

Error

Passerror: to turn the trigger red, add an alert icon and replace helperText with your message.

Disable past dates

SetdisablePast: to grey out every day before today. minDate and maxDate bound the calendar to any window; when both a lower bound and disablePast are given, the later one wins.

Date & time

Pick a day, then scroll the columns — Done closes the popover. The columns sit to the right of the calendar when the viewport has room, and under it otherwise.

SetshowTime: to add hour / minute / AM-PM columns under the calendar; the selected Date carries the time and the trigger shows it. timeFormat switches to a 24-hour clock and minuteStep sets the granularity.
WithdisablePast: as well, times that have already passed today are disabled too, and landing on today snaps the time forward to now.

Features

Discover the Date Picker's flexible input formatting, popover calendar selection, and range picking capabilities.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`value`	`Date \| null`	`undefined`	The currently selected JavaScript Date object.
`onChange`	`(val: Date) => void`	`undefined`	Callback function fired when a user selects a date from the calendar.
`placeholder`	`string`	`"Pick a date"`	Text displayed inside the trigger button when no date is selected.
`inputSize`	`"sm" \| "md" \| "lg"`	`"md"`	Uniformly scales the padding, text size, and icon size of the trigger button.
`variant`	`"default" \| "filled" \| "underlined" \| "glow"`	`"default"`	Determines the visual styling of the borders, background, and focus rings.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Applies the global color theme to the focus ring, glow shadow, and the selected date bubble in the calendar. Accepts valid hex codes.
`label`	`string`	`undefined`	Renders a bold, accessible label directly above the input.
`helperText`	`string`	`undefined`	Subtle instructional text rendered below the input.
`error`	`string`	`undefined`	If provided, turns the input red, adds an alert icon, and replaces the helper text with the error message.
`disabled`	`boolean`	`false`	Disables interactions and applies a faded, read-only style.
`disablePast`	`boolean`	`false`	Greys out every day before today so it cannot be picked. With `showTime`, times already passed today are disabled as well.
`minDate`	`Date`	`undefined`	Earliest selectable day (inclusive). Combined with `disablePast`, the later bound wins.
`maxDate`	`Date`	`undefined`	Latest selectable day (inclusive).
`showTime`	`boolean`	`false`	Adds hour / minute (and AM-PM) columns — to the right of the calendar when the viewport has room (the popover widens to 30rem), under it otherwise. The popover also flips to hang from the trigger's right edge when that is the side with space. Picking a day keeps the popover open until Done, and `value` carries the chosen time.
`timeFormat`	`"12h" \| "24h"`	`"12h"`	12-hour clock with an AM / PM column, or a 24-hour one.
`minuteStep`	`number`	`5`	Minute granularity of the time columns.