Date picker

When to use #

Use it for

Due dates, birthdays and any single date in a form.
You want typed and picked dates to agree.

Skip it when

Two dates are needed; use a date range picker.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/date-picker.json

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

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

export function DueDate() {
  const [due, setDue] = useState<string | null>(null);
  return (
    <div className="w-full max-w-xs">
      <DatePicker label="Due date" value={due} onValueChange={setDue} showToday />
    </div>
  );
}

API reference #

DatePicker

component

PropTypeDefault

label *string—

valuestring | null—

defaultValuestring | nullnull

onValueChange((value: string | null) => void)—

minstring—

maxstring—

showTodaybooleantrue

namestring—

disabledboolean—

classNamestring—

It is built on native elements and keeps aria-haspopup, aria-expanded, aria-hidden and aria-label in step with state.

KeyBehaviour

↓Moves to the next item or value.

↑Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.