or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-functionality.mddate-utilities.mdindex.mdlocalization.md
tile.json

tessl/npm-react-datepicker

A comprehensive React datepicker component that enables developers to create intuitive date and time selection interfaces for web applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-datepicker@8.7.x

To install, run

npx @tessl/cli install tessl/npm-react-datepicker@8.7.0

index.mddocs/

React DatePicker

React DatePicker is a comprehensive React component library that provides a powerful and customizable date picker interface. It supports single date selection, date ranges, multiple date selection, time picking, extensive localization, accessibility features, and advanced filtering options through an intuitive React component API.

Package Information

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

Core Imports

import DatePicker from "react-datepicker";
import { registerLocale, setDefaultLocale, getDefaultLocale, CalendarContainer } from "react-datepicker";
import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

For CommonJS:

const DatePicker = require("react-datepicker").default;
const { registerLocale, setDefaultLocale, getDefaultLocale, CalendarContainer } = require("react-datepicker");
require("react-datepicker/dist/react-datepicker.css");

Basic Usage

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function MyDatePicker() {
  const [startDate, setStartDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="MM/dd/yyyy"
      placeholderText="Select a date"
    />
  );
}

// Date range selection
function DateRangePicker() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePicker
      selected={startDate}
      onChange={(dates: [Date | null, Date | null]) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
      }}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      inline
    />
  );
}

Architecture

React DatePicker is built around several key components:

  • DatePicker Component: Main React component providing the complete date picker interface
  • Calendar System: Internal calendar rendering with month/year navigation and day selection
  • Date Utilities: Comprehensive date manipulation and formatting functions built on date-fns
  • Localization Engine: Full internationalization support with date-fns locale integration
  • Accessibility Framework: Complete ARIA support and keyboard navigation
  • Theming System: CSS-based styling with multiple theme options and customization points

Capabilities

Core Date Picker Functionality

The main DatePicker component with support for single dates, date ranges, multiple selection, and extensive customization options.

import DatePicker from "react-datepicker";

interface DatePickerProps {
  // Core date selection
  selected?: Date | null;
  onChange?: (date: Date | null, event?: React.SyntheticEvent) => void;
  
  // Date range selection
  selectsRange?: boolean;
  startDate?: Date | null;
  endDate?: Date | null;
  
  // Multiple date selection
  selectsMultiple?: boolean;
  selectedDates?: Date[];
  
  // Display options
  inline?: boolean;
  dateFormat?: string | string[];
  placeholderText?: string;
  
  // Constraints
  minDate?: Date;
  maxDate?: Date;
  excludeDates?: Date[];
  includeDates?: Date[];
  
  // Customization
  customInput?: React.ReactElement;
  calendarClassName?: string;
  wrapperClassName?: string;
}

function DatePicker(props: DatePickerProps): React.ReactElement;

Core Functionality

Date Utilities

Comprehensive date manipulation, formatting, and calculation functions for working with dates in JavaScript applications.

// Date creation and parsing
function newDate(value?: string | Date | number | null): Date;
function parseDate(value: string, format: string | string[], locale?: Locale, strictParsing?: boolean): Date | null;

// Date formatting
function formatDate(date: Date, format: string, locale?: Locale): string;
function safeDateFormat(date: Date | null, options: {dateFormat: string | string[], locale?: Locale}): string;

// Date comparisons
function isBefore(date: Date, dateToCompare: Date): boolean;
function isAfter(date: Date, dateToCompare: Date): boolean;
function isSameDay(date: Date, dateToCompare: Date): boolean;

Date Utilities

Localization and Internationalization

Complete internationalization support with date-fns locale integration for global applications.

type Locale = string | LocaleObject;

function registerLocale(localeName: string, localeData: LocaleObject): void;
function setDefaultLocale(locale: string): void;
function getDefaultLocale(): string;

Localization

Calendar Container

Customizable container component for advanced calendar layout and accessibility features.

interface CalendarContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  showTimeSelectOnly?: boolean;
  showTime?: boolean;
}

function CalendarContainer(props: CalendarContainerProps): React.ReactElement;

Types

// Core types
type Locale = string | LocaleObject;

interface LocaleObject {
  options?: LocaleOptions;
  formatLong?: FormatLongObject;
  localize?: LocalizeObject;
  match?: MatchObject;
}

interface DatePickerProps {
  // Main date selection props
  selected?: Date | null;
  onChange?: (date: Date | null | [Date | null, Date | null] | Date[], event?: React.SyntheticEvent) => void;
  
  // Selection modes
  selectsRange?: boolean;
  selectsMultiple?: boolean;
  
  // Date constraints
  minDate?: Date;
  maxDate?: Date;
  excludeDates?: Date[];
  includeDates?: Date[];
  excludeDateIntervals?: Array<{start: Date, end: Date}>;
  includeDateIntervals?: Array<{start: Date, end: Date}>;
  
  // Display and formatting
  dateFormat?: string | string[];
  locale?: Locale;
  inline?: boolean;
  
  // Time selection
  showTimeSelect?: boolean;
  showTimeSelectOnly?: boolean;
  timeFormat?: string;
  timeIntervals?: number;
  minTime?: Date;
  maxTime?: Date;
  
  // Calendar features
  showMonthDropdown?: boolean;
  showYearDropdown?: boolean;
  showWeekNumbers?: boolean;
  highlightDates?: Array<Date | {date: Date, className: string}>;
  
  // Accessibility
  ariaLabelledBy?: string;
  ariaDescribedBy?: string;
  
  // Events
  onFocus?: (event: React.FocusEvent) => void;
  onBlur?: (event: React.FocusEvent) => void;
  onCalendarOpen?: () => void;
  onCalendarClose?: () => void;
  
  // Customization
  customInput?: React.ReactElement;
  customInputRef?: string;
  className?: string;
  calendarClassName?: string;
  popperClassName?: string;
  
  // Portal and positioning
  withPortal?: boolean;
  portalId?: string;
  popperPlacement?: string;
  
  // Form integration
  id?: string;
  name?: string;
  required?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  autoComplete?: string;
  
  // Advanced features
  filterDate?: (date: Date) => boolean;
  filterTime?: (time: Date) => boolean;
  shouldCloseOnSelect?: boolean;
  preventOpenOnFocus?: boolean;
}

// Date utility types
enum KeyType {
  ArrowUp = "ArrowUp",
  ArrowDown = "ArrowDown",
  ArrowLeft = "ArrowLeft",
  ArrowRight = "ArrowRight",
  PageUp = "PageUp",
  PageDown = "PageDown",
  Home = "Home",
  End = "End",
  Enter = "Enter",
  Space = " ",
  Tab = "Tab",
  Escape = "Escape"
}

interface HighlightDate {
  date: Date;
  className?: string;
}

interface Holiday {
  date: string;
  holidayName: string;
}

// Custom header interface
interface ReactDatePickerCustomHeaderProps {
  date: Date;
  customHeaderCount: number;
  monthDate: Date;
  changeMonth: (month: number) => void;
  changeYear: (year: number) => void;
  decreaseMonth: () => void;
  increaseMonth: () => void;
  decreaseYear: () => void;
  increaseYear: () => void;
  prevMonthButtonDisabled: boolean;
  nextMonthButtonDisabled: boolean;
  prevYearButtonDisabled: boolean;
  nextYearButtonDisabled: boolean;
  visibleYearsRange?: {
    startYear: number;
    endYear: number;
  };
}

Constants

const DEFAULT_YEAR_ITEM_NUMBER: number = 12;
const DATE_RANGE_SEPARATOR: string = " - ";
const OUTSIDE_CLICK_IGNORE_CLASS: string = "react-datepicker-ignore-onclickoutside";