Date Picker

A date field that opens a calendar for picking one date

The date picker is a field that opens a calendar popover for choosing one date. Use it for due dates, birthdays, and other single-date form fields.

To select a start and end date together, use DateRangePicker instead.

Installation

npxnpx shadcn@latest add @cubby-ui/date-picker

Usage


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


<DatePicker />

Examples

Controlled

Use value and onValueChange to control the date. An empty field is null; add clearable for a button that empties it.

Wed Oct 14 2026

"use client";
 
import { useState } from "react";
import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";
 
export default function DatePickerControlled() {

Use editable to make the field a text input, with the calendar on a button beside it. It reads input such as "today", "tomorrow", "next fri", "in 2 weeks", "mar 14", "14 March 2027", "3/14" (in the locale's day and month order), or "2026-03-14". A hint on the right shows how the picker reads the text before the value changes. Enter or leaving the field commits; Escape undoes the edit.

No date

"use client";
 
import { useState } from "react";
import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";
 
export default function DatePickerEditable() {

Presets

Use presets to add one-click shortcuts beside the calendar. Give each a function instead of a fixed date so relative presets like "Tomorrow" resolve when the picker opens.

Min and Max

Use minDate and maxDate to block days outside a window and stop navigation past it. Use disabledDates for other blocks, such as weekends.

import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";
 
const today = new Date();
const inSixtyDays = new Date(
  today.getFullYear(),
  today.getMonth(),

In a Form

Use name to submit the date as YYYY-MM-DD through a hidden input. An id goes on the trigger, so a <label htmlFor> can name it.

"use client";
 
import { useState } from "react";
import { Button } from "@/components/ui/cubby-ui/button";
import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";

Custom Placeholder and Format

Use placeholder to set the empty text and format to control how the date is written. format takes the Date and returns a string.

import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";
 
const longDate = new Intl.DateTimeFormat(undefined, {
  weekday: "short",
  month: "long",
  day: "numeric",

Different Widths

Use a width utility in className to size the field. The default is w-60.

import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";
 
export default function DatePickerDifferentWidths() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <DatePicker className="w-48" placeholder="Narrow" />

Disabled State

Use disabled to stop the picker from opening.

import { DatePicker } from "@/components/ui/cubby-ui/date-picker/date-picker";
 
export default function DatePickerDisabledState() {
  return <DatePicker disabled defaultValue={new Date()} />;
}

Accessibility

The trigger is a button that opens the calendar in a popover and moves focus into it. Inside, use the arrow keys to move between days, PageUp and PageDown to change months, and Enter or Space to pick. Picking a date closes the popover and returns focus to the trigger; Escape closes it without a change. The clear button is a separate control after the trigger, labelled "Clear date".

With editable, the field is a text input (label it with id and a <label>, or aria-label), and the calendar opens from a "Choose date" button beside it or with ArrowDown in the input. The hint is a polite live region, so screen readers announce how the text was read ("Fri, Oct 9, 2026", "Unavailable"). Committing text the picker can't read sets aria-invalid on the input.