DatePicker

React DatePicker components are used to select a single date or a range of dates from a calendar. 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.

npx @tailgrids/cli add date-picker

Usage

The following example demonstrates how to use the single DatePicker component.

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

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

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

Note: Both normal and range 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.

Examples

Range Date Picker

Use this picker to select a start and end date as a range. The range picker defaults to a two-month view.

Note: 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.

Preselected Date

An example of a DatePicker with a default value.

API Reference

DatePicker

Extends HTMLDivElement props.

RangeDatePicker

Accessibility

• All 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