tessl/npm-react-day-picker

Customizable Date Picker for React with extensive internationalization and accessibility support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

React Day Picker

Name: tessl/npm-react-day-picker
Author: tessl

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;
}

Install with Tessl CLI