Day Picker

A date picker that opens a calendar popover for selecting a single date.

Overview

DayPicker renders a trigger element that opens a Dropdown containing an inline calendar. It is a controlled component; pass value and onValueChange to manage the selected date. The calendar is localized to English by default.

Use DayPicker for selecting a specific calendar date.
Use minDate and maxDate to constrain the selectable range.
For month-level selection, use MonthPicker instead.
Provide a custom trigger element for better visual integration with form layouts.

Accessibility

The calendar grid supports arrow key navigation between days.
Escape closes the dropdown and returns focus to the trigger.
Dates outside the minDate–maxDate range are marked with aria-disabled.
Month navigation buttons allow moving forward and backward through months.

Import

import { DayPicker } from "@cocso-ui/react";

Default

Control the selected date with the value and onValueChange props. When no custom trigger is provided, it renders as a default button.

"use client";

import { Button, DayPicker } from "@cocso-ui/react";
import { CalendarMonthIcon } from "@cocso-ui/react-icons";
import { useState } from "react";

export default function DayPickerDefault() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div className="p-4">
      <DayPicker
        onValueChange={setValue}
        trigger={
          <Button prefix={<CalendarMonthIcon size={16} />} variant="outline">
            {value ? value.toLocaleDateString("ko-KR") : "Select date"}
          </Button>
        }
        value={value ?? undefined}
      />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`value`	`Date`	-	The currently selected date. Pass `undefined` for no selection.
`onValueChange`	`(value: Date \| null) => void`	-	Callback invoked when the user selects a date or clears the selection. Receives a `Date` object or `null`.
`disabled`	`boolean`	-	Disables the trigger button and prevents the calendar from opening.
`minDate`	`Date`	-	The earliest selectable date. Days before this date are visually dimmed and cannot be selected.
`maxDate`	`Date`	-	The latest selectable date. Days after this date are visually dimmed and cannot be selected.
`trigger`	`ReactElement`	-	Custom trigger element replacing the default button. Use to integrate with form input fields or custom UI.