Skip to content

Date Picker

Base UI

A calendar on a ruled grid, inline or in a popover.

November 2026
MonTueWedThuFriSatSun

Install

$ npx shadcn@latest add https://spotcheckui.com/r/date-picker.json

Also installs @base-ui/react.

Usage

import { Calendar, DatePicker } from "@/components/spotcheck/date-picker"

<DatePicker label="Billing starts" value={date} onValueChange={setDate} />
<Calendar value={date} onValueChange={setDate} />

Weeks start on Monday. Pass locale to change the language of the labels.

Props

  • label * RequiredstringDefault —Names the control for screen readers.
  • valueDate | nullDefault —The selected date, when you control it.
  • defaultValueDate | nullDefault nullThe starting date, when it manages itself.
  • onValueChange(date: Date) => voidDefault —
  • defaultMonthDateDefault —The month to open on when nothing is selected.
  • placeholderstringDefault Pick a date
  • localestringDefault en-GB
  • classNamestringDefault —

Keyboard

← →Move by a day
↑ ↓Move by a week
HomeStart of the week
EndEnd of the week
Page UpPrevious month
Page DownNext month
EnterChoose the date

Reduced motion

Nothing here animates.