DatePicker

React DatePicker component provides an accessible and flexible way for users to select either a single date or a range of dates using a compact calendar interface. They are commonly used in forms, filters, booking flows, and scheduling features.

This DatePicker component is built with React and styled using Tailwind CSS. It supports date selection with keyboard-friendly interaction.

Installation

The Date Picker relies on the date-fns library for date manipulation.

Single Date Picker

Use this picker to select a single, specific date.

Preview

Selected: None

(With default value)

Usage

import { DatePicker } from "@/registry/core/date-picker/single-date";
import * as React from "react";

export default () => {
  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null);

  return (
    <DatePicker
      value={selectedDate}
      onChange={setSelectedDate}
      placeholder="Pick a birthday"
    />
  );
};

API Reference (DatePicker)

Extends HTMLDivElement props (via className).

Prop	Type	Default	Description
`value`	`Date \| null`	`null`	The currently selected date (controlled state).
`onChange`	`(date: Date) => void`	-	Callback function when a date is selected and applied.
`placeholder`	`string`	`'Select date'`	Placeholder text when no date is selected.
`className`	`string`	-	Custom class for the main wrapper `div`.

Range Date Picker

Use this picker to select a start and end date as a range.

Preview

Selected Range: Aug 25, 2028 - Sep 9, 2028

Usage

The range picker defaults to a two-month view.

import { RangeDatePicker } from "@/registry/core/date-picker/range-date";

export default () => (
  <RangeDatePicker
    onDateChange={(start, end) => {
      console.log("Start:", start, "End:", end);
    }}
  />
);

API Reference (RangeDatePicker)

Prop	Type	Default	Description
`defaultStartDate`	`Date`	Date set to August 25, 2028	The initial start date for the range.
`defaultEndDate`	`Date`	Date set to September 9, 2028	The initial end date for the range.
`onDateChange`	`(startDate: Date \| null, endDate: Date \| null) => void`	-	Callback function triggered when the Ok button is clicked.

Accessibility

Trigger buttons and calendar controls are keyboard accessible
Month navigation buttons support keyboard interaction
Uses standard <button> elements for all interactive controls
Focus is managed to allow closing the calendar without mouse input

Notes

Both pickers use a temporary selection state (tempSelected, tempStartDate, tempEndDate) that is only committed to the main state (value, startDate, endDate) and triggers onChange/onDateChange when the Apply or Ok button is pressed. This allows users to cancel their selection without affecting the form's data.
The RangeDatePicker automatically handles the logic of ensuring the user-selected first date is the tempStartDate and the second date is the tempEndDate, even if they are selected in reverse order.

CLI

Manual

On this page