or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

customization.mddate-utilities.mdindex.mdinternationalization.mdmain-component.mdselection.mdstyling.md
tile.json

tessl/npm-react-day-picker

Customizable Date Picker for React with extensive internationalization and accessibility support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-day-picker@9.9.x

To install, run

npx @tessl/cli install tessl/npm-react-day-picker@9.9.0

index.mddocs/

React Day Picker

React Day Picker is a comprehensive React component library for creating customizable date pickers, calendars, and date inputs. It provides extensive customization options through props, supports multiple selection modes (single days, multiple days, date ranges, and custom selections), and offers internationalization capabilities with support for various calendar systems including ISO 8601, Persian, and broadcast calendars.

Package Information

  • Package Name: react-day-picker
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-day-picker

Core Imports

import { DayPicker } from "react-day-picker";

For specific selection modes:

import { DayPicker, type DateRange, type SelectHandler } from "react-day-picker";

For CommonJS:

const { DayPicker } = require("react-day-picker");

Basic Usage

import React, { useState } from "react";
import { DayPicker, type DateRange } from "react-day-picker";
import "react-day-picker/style.css";

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
    />
  );
}

// Range selection example
function MyRangePicker() {
  const [range, setRange] = useState<DateRange | undefined>();

  return (
    <DayPicker
      mode="range"
      defaultMonth={new Date()}
      selected={range}
      onSelect={setRange}
    />
  );
}

Architecture

React Day Picker is built around several key components:

  • Main Component: DayPicker - The primary React component with extensive prop configuration
  • Selection System: Type-safe selection modes for single dates, multiple dates, and date ranges
  • Customization Layer: Complete component override system, custom formatters, and styling options
  • Internationalization: Built-in locale support with date-fns integration and custom calendar systems
  • Accessibility: WCAG 2.1 AA compliant with full keyboard navigation and screen reader support
  • Date Management: Custom DateLib class wrapping date-fns with locale and timezone support

Capabilities

Main Component

The core DayPicker React component with comprehensive configuration options for rendering customizable calendars.

function DayPicker(props: DayPickerProps): React.ReactElement;

type DayPickerProps = PropsBase & (
  | PropsSingle
  | PropsSingleRequired  
  | PropsMulti
  | PropsMultiRequired
  | PropsRange
  | PropsRangeRequired
  | { mode?: undefined; required?: undefined }
);

Main Component Configuration

Selection Modes

Type-safe selection system supporting single date, multiple dates, and date range selection with controlled and uncontrolled modes.

type Mode = "single" | "multiple" | "range";

type SelectedValue<T extends DayPickerProps> = 
  T["mode"] extends "single" ? Date | undefined :
  T["mode"] extends "multiple" ? Date[] | undefined :
  T["mode"] extends "range" ? DateRange | undefined :
  never;

type SelectHandler<T extends DayPickerProps> = (
  value: SelectedValue<T>,
  triggerDate: Date,
  modifiers: Modifiers,
  e: React.MouseEvent
) => void;

Selection System

Customization System

Complete component override system allowing replacement of any UI element with custom React components.

interface CustomComponents {
  Root?: React.ComponentType<RootProps>;
  Month?: React.ComponentType<MonthProps>;
  Day?: React.ComponentType<DayProps>;
  DayButton?: React.ComponentType<DayButtonProps>;
  // ... 20+ customizable components
}

interface ClassNames {
  [UI.Root]: string;
  [UI.Month]: string;
  [UI.Day]: string;
  // ... corresponding class names for all UI elements
}

Customization Options

Internationalization

Built-in support for multiple locales, calendar systems, and formatting options with date-fns integration.

interface Locale {
  code: string;
  formatDistance?: Function;
  formatRelative?: Function;
  localize?: Function;
  formatLong?: Function;
  match?: Function;
  options?: {
    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
  };
}

class DateLib {
  constructor(options: DateLibOptions, overrides?: Partial<DateLib>);
  // 50+ date utility methods
}

Internationalization

Date Range Utilities

Utility functions for working with date ranges, intervals, and date matching patterns.

interface DateRange {
  from: Date | undefined;
  to: Date | undefined;
}

function addToRange(
  date: Date,
  range: DateRange | undefined,
  options?: { min?: number; max?: number }
): DateRange | undefined;

function rangeIncludesDate(
  range: DateRange,
  date: Date,
  excludeEnds?: boolean,
  dateLib?: DateLib
): boolean;

Date Utilities

Styling System

Comprehensive styling system supporting CSS classes, inline styles, and CSS modules with modifier-based styling.

interface Styles {
  [UI.Root]?: React.CSSProperties;
  [UI.Month]?: React.CSSProperties;
  [UI.Day]?: React.CSSProperties;
  // ... styles for all UI elements
}

interface ModifiersStyles {
  [modifier: string]: React.CSSProperties;
}

Styling System

Types

Core Types

interface DayPickerProps extends PropsBase {
  mode?: Mode;
  required?: boolean;
}

interface PropsBase {
  className?: string;
  classNames?: Partial<ClassNames>;
  style?: React.CSSProperties;
  styles?: Partial<Styles>;
  id?: string;
  // ... 50+ configuration props
}

interface Modifiers {
  [modifier: string]: boolean;
}

type Matcher = 
  | boolean
  | ((date: Date) => boolean)
  | Date
  | Date[]
  | DateRange
  | DateInterval
  | DayOfWeek;

Selection Props Types

interface PropsSingle {
  mode: "single";
  selected?: Date;
  onSelect?: (date: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
}

interface PropsRange {
  mode: "range";
  selected?: DateRange;
  onSelect?: (range: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
}

interface PropsMulti {
  mode: "multiple";
  selected?: Date[];
  onSelect?: (dates: Date[] | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
}