react-day-picker

  • Version 9.0.0
  • Published
  • 976 kB
  • 1 dependency
  • MIT license

Install

npm i react-day-picker
yarn add react-day-picker
pnpm add react-day-picker

Overview

Customizable Date Picker for React

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable Caption

const Caption: (props: any) => React.JSX.Element;
  • See Also

    • https://daypicker.dev/guides/custom-components

    Deprecated

    This component has been renamed. Use MonthCaption instead. Components

variable dayPickerContext

const dayPickerContext: any;

    variable formatMonthCaption

    const formatMonthCaption: (
    month: Date,
    options?: DateFnsFormatOptions,
    dateLib?: {
    Date: GenericDateConstructor;
    addDays: any;
    addMonths: any;
    addWeeks: any;
    addYears: any;
    differenceInCalendarDays: any;
    differenceInCalendarMonths: any;
    endOfISOWeek: any;
    endOfMonth: any;
    endOfWeek: any;
    endOfYear: any;
    format: any;
    getISOWeek: any;
    getWeek: any;
    isAfter: any;
    isBefore: any;
    isDate: any;
    isSameDay: any;
    isSameMonth: any;
    isSameYear: any;
    max: any;
    min: any;
    setMonth: any;
    setYear: any;
    startOfDay: any;
    startOfISOWeek: any;
    startOfMonth: any;
    startOfWeek: any;
    startOfYear: any;
    }
    ) => string;

    variable formatYearCaption

    const formatYearCaption: (year: number) => string;
    • Deprecated

      Use formatYearDropdown instead. Formatters

    variable labelCaption

    const labelCaption: (
    date: Date,
    options?: DateFnsFormatOptions,
    dateLib?: {
    Date: GenericDateConstructor;
    addDays: any;
    addMonths: any;
    addWeeks: any;
    addYears: any;
    differenceInCalendarDays: any;
    differenceInCalendarMonths: any;
    endOfISOWeek: any;
    endOfMonth: any;
    endOfWeek: any;
    endOfYear: any;
    format: any;
    getISOWeek: any;
    getWeek: any;
    isAfter: any;
    isBefore: any;
    isDate: any;
    isSameDay: any;
    isSameMonth: any;
    isSameYear: any;
    max: any;
    min: any;
    setMonth: any;
    setYear: any;
    startOfDay: any;
    startOfISOWeek: any;
    startOfMonth: any;
    startOfWeek: any;
    startOfYear: any;
    }
    ) => string;

    variable labelDay

    const labelDay: (
    date: Date,
    modifiers: Modifiers,
    options?: DateFnsFormatOptions,
    dateLib?: {
    Date: GenericDateConstructor;
    addDays: any;
    addMonths: any;
    addWeeks: any;
    addYears: any;
    differenceInCalendarDays: any;
    differenceInCalendarMonths: any;
    endOfISOWeek: any;
    endOfMonth: any;
    endOfWeek: any;
    endOfYear: any;
    format: any;
    getISOWeek: any;
    getWeek: any;
    isAfter: any;
    isBefore: any;
    isDate: any;
    isSameDay: any;
    isSameMonth: any;
    isSameYear: any;
    max: any;
    min: any;
    setMonth: any;
    setYear: any;
    startOfDay: any;
    startOfISOWeek: any;
    startOfMonth: any;
    startOfWeek: any;
    startOfYear: any;
    }
    ) => string;
    • Deprecated

      Use labelDayButton instead.

    variable Row

    const Row: (props: any) => React.JSX.Element;
    • See Also

      • https://daypicker.dev/guides/custom-components

      Deprecated

      This component has been renamed. Use Week instead. Components

    variable useNavigation

    const useNavigation: <T extends DayPickerProps>(props?: T) => DayPickerContext<T>;
    • Deprecated

      This type has been removed to useDayPicker. Hooks

    Functions

    function addToRange

    addToRange: (
    date: Date,
    range: DateRange | undefined,
    dateLib?: DateLib
    ) => DateRange;
    • Add a day to an existing range.

      The returned range takes in account the undefined values and if the added day is already present in the range.

      Utilities

    function Button

    Button: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the button elements in the calendar.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function CaptionLabel

    CaptionLabel: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the label in the month caption.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Chevron

    Chevron: (props: {
    className?: string;
    size?: number;
    disabled?: boolean;
    orientation?: 'up' | 'down' | 'left' | 'right';
    }) => React.JSX.Element;
    • Render the chevron icon used in the navigation buttons and dropdowns.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function dateMatchModifiers

    dateMatchModifiers: (
    date: Date,
    matchers: Matcher | Matcher[],
    dateLib: DateLib
    ) => boolean;
    • Returns whether a day matches against at least one of the given Matcher.

      const day = new Date(2022, 5, 19);
      const matcher1: DateRange = {
      from: new Date(2021, 12, 21),
      to: new Date(2021, 12, 30)
      }
      const matcher2: DateRange = {
      from: new Date(2022, 5, 1),
      to: new Date(2022, 5, 23)
      }
      const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.

      Utilities

    function Day

    Day: (
    props: { day: CalendarDay; modifiers: Modifiers } & JSX.IntrinsicElements['td']
    ) => React.JSX.Element;
    • Render the gridcell of a day in the calendar and handle the interaction and the focus with they day.

      If you need to just change the content of the day cell, consider swapping the DayDate component instead.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function DayButton

    DayButton: (
    props: {
    day: CalendarDay;
    modifiers: Modifiers;
    } & JSX.IntrinsicElements['button']
    ) => React.JSX.Element;
    • Render the button for a day in the calendar.

      When not interactive, DayPicker will render a DayContent component instead of a DayButton component.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function DayPicker

    DayPicker: <T extends DayPickerProps>(props: T) => React.JSX.Element;
    • Render the date picker calendar.

      DayPicker

      See Also

      • https://daypicker.dev

    Dropdown: (
    props: {
    components: Pick<CustomComponents, 'Select' | 'Option' | 'Chevron'>;
    classNames: Pick<
    ClassNames,
    UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron
    >;
    options?: DropdownOption[] | undefined;
    } & Omit<JSX.IntrinsicElements['select'], 'children'>
    ) => React.JSX.Element;
    • Render a dropdown component to use in the navigation bar.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    DropdownNav: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the the navigation dropdowns.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    Footer: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Component wrapping the footer.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function formatCaption

    formatCaption: (
    month: Date,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • Format the caption of the month.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function formatDay

    formatDay: (
    date: Date,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • Format the day date shown in the day cell.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function formatMonthDropdown

    formatMonthDropdown: (monthNumber: number, locale?: any) => string;
    • Format the month number for the dropdown option label.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function formatWeekdayName

    formatWeekdayName: (
    weekday: Date,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • Format the weekday name to be displayed in the weekdays header.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function formatWeekNumber

    formatWeekNumber: (weekNumber: number) => string;
    • Format the week number.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function formatWeekNumberHeader

    formatWeekNumberHeader: () => string;
    • Format the week number header.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function formatYearDropdown

    formatYearDropdown: (year: number) => string;
    • Format the years for the dropdown option label.

      See Also

      • https://daypicker.dev/docs/translation#custom-formatters

    function getDefaultClassNames

    getDefaultClassNames: () => ClassNames;
    • Get the default class names for the UI elements.

      Utilities

    function isDateAfterType

    isDateAfterType: (value: unknown) => value is DateAfter;
    • Returns true if value is of type DateAfter.

      Utilities

    function isDateBeforeType

    isDateBeforeType: (value: unknown) => value is DateBefore;
    • Returns true if value is of type DateBefore.

      Utilities

    function isDateInRange

    isDateInRange: (range: DateRange, date: Date) => boolean;

    function isDateInterval

    isDateInterval: (matcher: unknown) => matcher is DateInterval;

    function isDateRange

    isDateRange: (value: unknown) => value is DateRange;
    • Returns true if value is a DateRange type.

      Utilities

    function isDatesArray

    isDatesArray: (value: unknown, dateLib: DateLib) => value is Date[];
    • Returns true if value is an array of valid dates.

    function isDayOfWeekType

    isDayOfWeekType: (value: unknown) => value is DayOfWeek;
    • Returns true if value is a DayOfWeek type.

      Utilities

    function labelDayButton

    labelDayButton: (
    date: Date,
    modifiers: Modifiers,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • The ARIA label for the day button.

      Use the modifiers argument to add additional context to the label, e.g. when a day is selected or is today.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelGrid

    labelGrid: (
    date: Date,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • Return an ARIA label for the month grid, that will be announced when entering the grid.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelGridcell

    labelGridcell: (
    date: Date,
    modifiers?: Modifiers,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • The label for the day gridcell when the calendar is not interactive.

      Labels

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelMonthDropdown

    labelMonthDropdown: (options?: DateFnsFormatOptions) => string;
    • The ARIA label for the months dropdown.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelNav

    labelNav: () => string;
    • The ARIA label for the navigation toolbar.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelNext

    labelNext: (month: Date | undefined, options?: DateFnsFormatOptions) => string;
    • The ARIA label for next month button.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelPrevious

    labelPrevious: (
    month: Date | undefined,
    options?: DateFnsFormatOptions
    ) => string;
    • The ARIA label for previous month button.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelWeekday

    labelWeekday: (
    date: Date,
    options?: DateFnsFormatOptions,
    dateLib?: DateLib
    ) => string;
    • The ARIA label for the Weekday column header.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelWeekNumber

    labelWeekNumber: (weekNumber: number, options?: DateFnsFormatOptions) => string;
    • The ARIA label for the week number cell (the first cell in the row).

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelWeekNumberHeader

    labelWeekNumberHeader: (options?: DateFnsFormatOptions) => string;
    • The ARIA label for the week number header element.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function labelYearDropdown

    labelYearDropdown: (options?: DateFnsFormatOptions) => string;
    • The ARIA label for the years dropdown.

      See Also

      • https://daypicker.dev/docs/translation#aria-labels

    function Month

    Month: (
    props: {
    calendarMonth: CalendarMonth;
    displayIndex: number;
    } & JSX.IntrinsicElements['div']
    ) => React.JSX.Element;
    • Render the grid with the weekday header row and the weeks for the given month.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function MonthCaption

    MonthCaption: (
    props: {
    calendarMonth: CalendarMonth;
    displayIndex: number;
    } & JSX.IntrinsicElements['div']
    ) => React.JSX.Element;
    • Render the caption of a month in the calendar.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function MonthGrid

    MonthGrid: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the grid of days in a month.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Months

    Months: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Component wrapping the month grids.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    Nav: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the toolbar with the navigation button.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Option

    Option: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the option element.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function rangeIncludesDate

    rangeIncludesDate: (
    range: DateRange,
    date: Date,
    excludeEnds?: boolean,
    dateLib?: DateLib
    ) => boolean;
    • Determines whether a given date is inside a specified date range.

      9.0.0 Utilities

    function Root

    Root: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the root element.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Select

    Select: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the select element.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function useDayPicker

    useDayPicker: <T extends DayPickerProps>(props?: T) => DayPickerContext<T>;
    • Return the context to work with <DayPicker /> inside custom components.

      Hooks

      See Also

      • https://daypicker.dev/guides/custom-components

    function Week

    Week: (
    props: { week: CalendarWeek } & JSX.IntrinsicElements['tr']
    ) => React.JSX.Element;
    • Render a row in the calendar, with the days and the week number.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Weekday

    Weekday: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Weekdays

    Weekdays: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the row with the weekday names.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function WeekNumber

    WeekNumber: (
    props: { week: CalendarWeek } & JSX.IntrinsicElements['td']
    ) => React.JSX.Element;
    • Render the cell with the number of the week.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function WeekNumberHeader

    WeekNumberHeader: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the column header for the week numbers.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    function Weeks

    Weeks: (props: JSX.IntrinsicElements) => React.JSX.Element;
    • Render the weeks in the month grid.

      Components

      See Also

      • https://daypicker.dev/guides/custom-components

    Classes

    class CalendarDay

    class CalendarDay {}
    • Represent the day displayed in the calendar.

      In DayPicker, a Day is a Date that can be displayed in the calendar. It is used as extension of the native Date object to provide additional information about the day.

    constructor

    constructor(
    date: Date,
    displayMonth: Date,
    dateLib?: {
    Date: GenericDateConstructor;
    addDays: any;
    addMonths: any;
    addWeeks: any;
    addYears: any;
    differenceInCalendarDays: any;
    differenceInCalendarMonths: any;
    endOfISOWeek: any;
    endOfMonth: any;
    endOfWeek: any;
    endOfYear: any;
    format: any;
    getISOWeek: any;
    getWeek: any;
    isAfter: any;
    isBefore: any;
    isDate: any;
    isSameDay: any;
    isSameMonth: any;
    isSameYear: any;
    max: any;
    min: any;
    setMonth: any;
    setYear: any;
    startOfDay: any;
    startOfISOWeek: any;
    startOfMonth: any;
    startOfWeek: any;
    startOfYear: any;
    }
    );

      property date

      readonly date: Date;
      • The date represented by this day.

      property dateLib

      readonly dateLib: {
      Date: GenericDateConstructor;
      addDays: any;
      addMonths: any;
      addWeeks: any;
      addYears: any;
      differenceInCalendarDays: any;
      differenceInCalendarMonths: any;
      endOfISOWeek: any;
      endOfMonth: any;
      endOfWeek: any;
      endOfYear: any;
      format: any;
      getISOWeek: any;
      getWeek: any;
      isAfter: any;
      isBefore: any;
      isDate: any;
      isSameDay: any;
      isSameMonth: any;
      isSameYear: any;
      max: any;
      min: any;
      setMonth: any;
      setYear: any;
      startOfDay: any;
      startOfISOWeek: any;
      startOfMonth: any;
      startOfWeek: any;
      startOfYear: any;
      };
      • The utility functions to manipulate dates.

      property displayMonth

      readonly displayMonth: Date;
      • The months where the day is displayed.

        In DayPicker, days can fall out the displayed months (e.g. when showOutsideDays is true). This property is useful to know if the day is in the same month of the displayed month.

      property outside

      readonly outside: boolean;
      • Whether the day is not belonging to the displayed month.

        When outside is true, use displayMonth to know to which month the day belongs.

      method isEqualTo

      isEqualTo: (day: CalendarDay) => boolean;
      • Check if the day is the same as the given day: considering if it is in the same display month.

      class CalendarMonth

      class CalendarMonth {}
      • Represent a month in a calendar year. Contains the weeks within the month.

      constructor

      constructor(month: Date, weeks: CalendarWeek[]);

        property date

        date: Date;
        • The date of the month.

        property weeks

        weeks: CalendarWeek[];
        • The weeks within the month.

        class CalendarWeek

        class CalendarWeek {}
        • Represent a week in a calendar month.

        constructor

        constructor(weekNumber: number, days: CalendarDay[]);

          property days

          days: CalendarDay[];
          • The days within the week.

          property weekNumber

          weekNumber: number;
          • The number of the week within the year.

          Interfaces

          interface PropsBase

          interface PropsBase {}
          • Props used for customization of the calendar, localization, and event handling.

          property autoFocus

          autoFocus?: boolean;
          • When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled).

            Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.

            See Also

            • https://daypicker.dev/docs/accessibility#autofocus

          property captionLayout

          captionLayout?: 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';
          • Show dropdowns to navigate between months or years.

            - true: display the dropdowns for both month and year - label: display the month and the year as a label. Change the label with the formatCaption formatter. - month: display only the dropdown for the months - year: display only the dropdown for the years

            **Note:** showing the dropdown will set the start/end months fromYear to the 100 years ago, and toYear to the current year.

            See Also

            • https://daypicker.dev/docs/customization#caption-layouts

          property className

          className?: string;
          • Class name to add to the root element

          property classNames

          classNames?: Partial<ClassNames>;
          • Change the class names used by DayPicker.

            Use this prop when you need to change the default class names — for example when importing the style via CSS modules or when using a CSS framework.

            See Also

            • https://daypicker.dev/docs/styling

          property components

          components?: Partial<CustomComponents>;
          • Change the components used for rendering the calendar elements.

            See Also

            • https://daypicker.dev/guides/custom-components

          property dateLib

          dateLib?: Partial<DateLib> | undefined;
          • Replace the default date library with a custom one.

            9.0.0

            Modifiers

            • @experimental

          property defaultMonth

          defaultMonth?: Date;
          • The initial month to show in the calendar.

            Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use month and onMonthChange.

            See Also

            • https://daypicker.dev/docs/navigation

          property dir

          dir?: HTMLDivElement['dir'];
          • The text direction of the calendar. Use ltr for left-to-right (default) or rtl for right-to-left.

            See Also

            • https://daypicker.dev/docs/translation#rtl-text-direction

          property disabled

          disabled?: Matcher | Matcher[] | undefined;
          • Apply the disabled modifier to the matching days.

            See Also

            • https://daypicker.dev/docs/selection-modes#disabling-dates

          property disableNavigation

          disableNavigation?: boolean;
          • Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use hideNavigation.

            See Also

            • https://daypicker.dev/docs/navigation#disablenavigation

          property endMonth

          endMonth?: Date;
          • The latest month to end the month navigation.

            9.0.0

            See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

          property firstWeekContainsDate

          firstWeekContainsDate?: 1 | 4;
          • The day of January, which is always in the first week of the year.

            See Also

            • https://daypicker.dev/docs/localization#first-week-contains-date

          property fixedWeeks

          fixedWeeks?: boolean;
          • Display always 6 weeks per each month, regardless the month’s number of weeks. Weeks will be filled with the days from the next month.

            See Also

            • https://daypicker.dev/docs/customization#fixed-weeks

          property footer

          footer?: React.ReactNode | string;
          • Add a footer to the calendar, acting as live region.

            Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements.

            See Also

            • https://daypicker.dev/docs/accessibility#footer

          property formatters

          formatters?: Partial<Formatters>;
          • Formatters used to format dates to strings. Use this prop to override the default functions.

            See Also

            • https://daypicker.dev/docs/translation#custom-formatters

          property fromDate

          fromDate?: Date | undefined;
          • See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

            Deprecated

            This prop has been removed. Use hidden={{ before: date }} instead.

          property fromMonth

          fromMonth?: Date | undefined;
          • See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

            Deprecated

            This prop has been renamed to startMonth.

          property fromYear

          fromYear?: number | undefined;
          • See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

            Deprecated

            Use startMonth instead. E.g. `startMonth={new Date(year, 0)}`.

          property hidden

          hidden?: Matcher | Matcher[] | undefined;
          • Apply the hidden modifier to the matching days. Will hide them from the calendar.

            See Also

            • https://daypicker.dev/guides/custom-modifiers#hidden-modifier

          property hideNavigation

          hideNavigation?: boolean;
          • Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use disableNavigation.

            9.0.0

            See Also

            • https://daypicker.dev/docs/navigation#hidenavigation

          property hideWeekdays

          hideWeekdays?: boolean;
          • Hide the row displaying the weekday row header.

            9.0.0

          property id

          id?: string;
          • A unique id to add to the root element.

          property ISOWeek

          ISOWeek?: boolean;
          • Use ISO week dates instead of the locale setting. Setting this prop will ignore weekStartsOn and firstWeekContainsDate.

            Use the [react-day-picker/utc](https://daypicker.dev/docs/localization#utc-dates) to set the calendar to UTC.

            See Also

            • https://daypicker.dev/docs/localization#iso-week-dates

            • https://en.wikipedia.org/wiki/ISO_week_date

          property labels

          labels?: Partial<Labels>;
          • Labels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker.

            See Also

            • https://daypicker.dev/docs/translation#aria-labels

          property lang

          lang?: HTMLDivElement['lang'];
          • Add the language tag to the container element.

          property locale

          locale?: Locale | undefined;
          • The date-fns locale object used to localize dates.

            See Also

            • https://daypicker.dev/docs/localization

          property mode

          mode?: Mode | undefined;
          • Enable the selection of single day, multiple days or a range of days.

            See Also

            • https://daypicker.dev/docs/selection-modes

          property modifiers

          modifiers?: Record<string, Matcher | Matcher[] | undefined> | undefined;
          • Add modifiers to the matching days.

            See Also

            • https://daypicker.dev/guides/custom-modifiers

          property modifiersClassNames

          modifiersClassNames?: ModifiersClassNames;
          • Change the class name for the day matching the modifiers.

            See Also

            • https://daypicker.dev/guides/custom-modifiers

          property modifiersStyles

          modifiersStyles?: ModifiersStyles;
          • Change the class name for the day matching the modifiers.

            See Also

            • https://daypicker.dev/guides/custom-modifiers

          property month

          month?: Date;
          • The month displayed in the calendar.

            As opposed to defaultMonth, use this prop with onMonthChange to change the month programmatically.

            See Also

            • https://daypicker.dev/docs/navigation

          property nonce

          nonce?: HTMLDivElement['nonce'];
          • A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline style attributes.

          property numberOfMonths

          numberOfMonths?: number;
          • The number of displayed months.

            See Also

            • https://daypicker.dev/docs/customization#multiplemonths

          property onDayBlur

          onDayBlur?: DayEventHandler<React.FocusEvent>;
          • Event handler when a day is blurred.

          property onDayClick

          onDayClick?: DayEventHandler<React.MouseEvent>;
          • Event handler when a day is clicked.

          property onDayFocus

          onDayFocus?: DayEventHandler<React.FocusEvent>;
          • Event handler when a day is focused.

          property onDayKeyDown

          onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
          • Event handler when a key is pressed on a day.

          property onDayKeyPress

          onDayKeyPress?: DayEventHandler<React.KeyboardEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayKeyUp

          onDayKeyUp?: DayEventHandler<React.KeyboardEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayPointerEnter

          onDayPointerEnter?: DayEventHandler<React.PointerEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayPointerLeave

          onDayPointerLeave?: DayEventHandler<React.PointerEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayTouchCancel

          onDayTouchCancel?: DayEventHandler<React.TouchEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayTouchEnd

          onDayTouchEnd?: DayEventHandler<React.TouchEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayTouchMove

          onDayTouchMove?: DayEventHandler<React.TouchEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onDayTouchStart

          onDayTouchStart?: DayEventHandler<React.TouchEvent>;
          • Deprecated

            Use a custom DayButton component instead.

          property onMonthChange

          onMonthChange?: MonthChangeEventHandler;
          • Event fired when the user navigates between months.

            See Also

            • https://daypicker.dev/docs/navigation#onmonthchange

          property onNextClick

          onNextClick?: MonthChangeEventHandler;
          • Event handler when the next month button is clicked.

            See Also

            • https://daypicker.dev/docs/navigation

          property onPrevClick

          onPrevClick?: MonthChangeEventHandler;
          • Event handler when the previous month button is clicked.

            See Also

            • https://daypicker.dev/docs/navigation

          property onWeekNumberClick

          onWeekNumberClick?: any;
          • Event handler when a week number is clicked

            See Also

            • https://daypicker.dev/docs/customization#showweeknumber

            Deprecated

            Use a custom WeekNumber component instead.

          property pagedNavigation

          pagedNavigation?: boolean;
          • Paginate the month navigation displaying the numberOfMonths at time.

            See Also

            • https://daypicker.dev/docs/customization#multiplemonths

          property required

          required?: boolean | undefined;
          • Whether the selection is required.

            See Also

            • https://daypicker.dev/docs/selection-modes

          property reverseMonths

          reverseMonths?: boolean;
          • Render the months in reversed order (when numberOfMonths is set) to display the most recent month first.

            See Also

            • https://daypicker.dev/docs/customization#multiplemonths

          property showOutsideDays

          showOutsideDays?: boolean;
          • Show the outside days (days falling in the next or the previous month).

            See Also

            • https://daypicker.dev/docs/customization#outside-days

          property showWeekNumber

          showWeekNumber?: boolean;
          • Show the week numbers column. Weeks are numbered according to the local week index.

            - To use ISO week numbering, use the ISOWeek prop. - To change how the week numbers are displayed, use the formatters prop.

            See Also

            • https://daypicker.dev/docs/customization#showweeknumber

          property startMonth

          startMonth?: Date | undefined;
          • The earliest month to start the month navigation.

            9.0.0

            See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

          property style

          style?: React.CSSProperties;
          • Style to apply to the root element.

          property styles

          styles?: Partial<Styles>;
          • Change the inline styles of the HTML elements.

            See Also

            • https://daypicker.dev/docs/styling

          property title

          title?: HTMLDivElement['title'];
          • Add a title attribute to the container element.

          property toDate

          toDate?: Date;
          • See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

            Deprecated

            This prop has been removed. Use hidden={{ after: date }} instead.

          property today

          today?: Date;
          • The today’s date. Default is the current date. This date will get the today modifier to style the day.

            See Also

            • https://daypicker.dev/guides/custom-modifiers#today-modifier

          property toMonth

          toMonth?: Date;
          • See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

            Deprecated

            This prop has been renamed to endMonth.

          property toYear

          toYear?: number;
          • See Also

            • https://daypicker.dev/docs/navigation#start-and-end-dates

            Deprecated

            Use endMonth instead. E.g. endMonth={new Date(year, 0)}.

          property useAdditionalDayOfYearTokens

          useAdditionalDayOfYearTokens?: boolean | undefined;
          • Enable YY and YYYY for day of year tokens when formatting or parsing dates.

            See Also

            • https://date-fns.org/docs/Unicode-Tokens

          property useAdditionalWeekYearTokens

          useAdditionalWeekYearTokens?: boolean | undefined;
          • Enable DD and DDDD for week year tokens when formatting or parsing dates.

            See Also

            • https://date-fns.org/docs/Unicode-Tokens

          property weekStartsOn

          weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
          • The index of the first day of the week (0 - Sunday). Overrides the locale's one.

            See Also

            • https://daypicker.dev/docs/localization#first-date-of-the-week

          interface PropsMulti

          interface PropsMulti {}
          • The props when the multiple selection is optional.

            See Also

            • https://daypicker.dev/docs/selection-modes#multiple-mode

          property max

          max?: number;

            property min

            min?: number;

              property mode

              mode: 'multiple';

                property onSelect

                onSelect?: (
                selected: Date[] | undefined,
                triggerDate: Date,
                modifiers: Modifiers,
                e: React.MouseEvent | React.KeyboardEvent
                ) => void;

                  property required

                  required?: false | undefined;

                    property selected

                    selected?: Date[] | undefined;

                      interface PropsMultiRequired

                      interface PropsMultiRequired {}
                      • The props when the multiple selection is required.

                        See Also

                        • https://daypicker.dev/docs/selection-modes#multiple-mode

                      property max

                      max?: number;

                        property min

                        min?: number;

                          property mode

                          mode: 'multiple';

                            property onSelect

                            onSelect?: (
                            selected: Date[],
                            triggerDate: Date,
                            modifiers: Modifiers,
                            e: React.MouseEvent | React.KeyboardEvent
                            ) => void;

                              property required

                              required: true;

                                property selected

                                selected: Date[];

                                  interface PropsRange

                                  interface PropsRange {}
                                  • The props when the range selection is optional.

                                    See Also

                                    • https://daypicker.dev/docs/selection-modes#range-mode

                                  property disabled

                                  disabled?: Matcher | Matcher[] | undefined;

                                    property max

                                    max?: number;

                                      property min

                                      min?: number;

                                        property mode

                                        mode: 'range';

                                          property onSelect

                                          onSelect?: (
                                          selected: DateRange | undefined,
                                          triggerDate: Date,
                                          modifiers: Modifiers,
                                          e: React.MouseEvent | React.KeyboardEvent
                                          ) => void | undefined;

                                            property required

                                            required?: false | undefined;

                                              property selected

                                              selected?: DateRange | undefined;

                                                interface PropsRangeRequired

                                                interface PropsRangeRequired {}
                                                • The props when the range selection is required.

                                                  See Also

                                                  • https://daypicker.dev/docs/selection-modes#range-mode

                                                property max

                                                max?: number;

                                                  property min

                                                  min?: number;

                                                    property mode

                                                    mode: 'range';

                                                      property onSelect

                                                      onSelect?: (
                                                      selected: DateRange,
                                                      triggerDate: Date,
                                                      modifiers: Modifiers,
                                                      e: React.MouseEvent | React.KeyboardEvent
                                                      ) => void;

                                                        property required

                                                        required: true;

                                                          property selected

                                                          selected: DateRange;

                                                            interface PropsSingle

                                                            interface PropsSingle {}
                                                            • The props when the single selection is optional.

                                                              See Also

                                                              • https://daypicker.dev/docs/selection-modes#single-mode

                                                            property mode

                                                            mode: 'single';

                                                              property onSelect

                                                              onSelect?: (
                                                              selected: Date | undefined,
                                                              triggerDate: Date,
                                                              modifiers: Modifiers,
                                                              e: React.MouseEvent | React.KeyboardEvent
                                                              ) => void;

                                                                property required

                                                                required?: false | undefined;

                                                                  property selected

                                                                  selected?: Date | undefined;

                                                                    interface PropsSingleRequired

                                                                    interface PropsSingleRequired {}
                                                                    • The props when the single selection is required.

                                                                      See Also

                                                                      • https://daypicker.dev/docs/selection-modes#single-mode

                                                                    property mode

                                                                    mode: 'single';

                                                                      property onSelect

                                                                      onSelect?: (
                                                                      selected: Date,
                                                                      triggerDate: Date,
                                                                      modifiers: Modifiers,
                                                                      e: React.MouseEvent | React.KeyboardEvent
                                                                      ) => void | undefined;

                                                                        property required

                                                                        required: true;

                                                                          property selected

                                                                          selected: Date;

                                                                            Enums

                                                                            enum DayFlag

                                                                            enum DayFlag {
                                                                            disabled = 'disabled',
                                                                            hidden = 'hidden',
                                                                            outside = 'outside',
                                                                            focused = 'focused',
                                                                            today = 'today',
                                                                            }

                                                                            member disabled

                                                                            disabled = 'disabled'
                                                                            • The day is disabled.

                                                                            member focused

                                                                            focused = 'focused'
                                                                            • The day is focused.

                                                                            member hidden

                                                                            hidden = 'hidden'
                                                                            • The day is hidden.

                                                                            member outside

                                                                            outside = 'outside'
                                                                            • The day is outside the current month.

                                                                            member today

                                                                            today = 'today'
                                                                            • The day is today.

                                                                            enum SelectionState

                                                                            enum SelectionState {
                                                                            range_end = 'range_end',
                                                                            range_middle = 'range_middle',
                                                                            range_start = 'range_start',
                                                                            selected = 'selected',
                                                                            }
                                                                            • The state that can be applied to the UI.Day element when in selection mode.

                                                                            member range_end

                                                                            range_end = 'range_end'
                                                                            • The day is at the end of a selected range.

                                                                            member range_middle

                                                                            range_middle = 'range_middle'
                                                                            • The day is at the middle of a selected range.

                                                                            member range_start

                                                                            range_start = 'range_start'
                                                                            • The day is at the start of a selected range.

                                                                            member selected

                                                                            selected = 'selected'
                                                                            • The day is selected.

                                                                            enum UI

                                                                            enum UI {
                                                                            ButtonPrevious = 'button_previous',
                                                                            ButtonNext = 'button_next',
                                                                            Root = 'root',
                                                                            Chevron = 'chevron',
                                                                            Day = 'day',
                                                                            DayButton = 'day_button',
                                                                            CaptionLabel = 'caption_label',
                                                                            Dropdowns = 'dropdowns',
                                                                            Dropdown = 'dropdown',
                                                                            DropdownRoot = 'dropdown_root',
                                                                            Footer = 'footer',
                                                                            MonthGrid = 'month_grid',
                                                                            MonthCaption = 'month_caption',
                                                                            MonthsDropdown = 'months_dropdown',
                                                                            Month = 'month',
                                                                            Months = 'months',
                                                                            Nav = 'nav',
                                                                            Week = 'week',
                                                                            Weeks = 'weeks',
                                                                            Weekday = 'weekday',
                                                                            Weekdays = 'weekdays',
                                                                            WeekNumber = 'week_number',
                                                                            WeekNumberHeader = 'week_number_header',
                                                                            YearsDropdown = 'years_dropdown',
                                                                            }
                                                                            • The UI elements composing DayPicker. These elements are mapped to CustomComponents, the ClassNames and the Styles used by DayPicker.

                                                                              Some of these elements are extended by flags and modifiers.

                                                                            member ButtonNext

                                                                            ButtonNext = 'button_next'
                                                                            • The next button the navigation.

                                                                            member ButtonPrevious

                                                                            ButtonPrevious = 'button_previous'
                                                                            • The previous button in the navigation.

                                                                            member CaptionLabel

                                                                            CaptionLabel = 'caption_label'
                                                                            • The caption label of the month (when not showing the dropdown navigation).

                                                                            member Chevron

                                                                            Chevron = 'chevron'
                                                                            • The Chevron SVG element used by navigation buttons and dropdowns.

                                                                            member Day

                                                                            Day = 'day'

                                                                            member DayButton

                                                                            DayButton = 'day_button'
                                                                            • The button containing the formatted day's date, inside the grid cell.

                                                                            member Dropdown

                                                                            Dropdown = 'dropdown'
                                                                            • The dropdown element to select for years and months.

                                                                            member DropdownRoot

                                                                            DropdownRoot = 'dropdown_root'
                                                                            • The container element of the dropdown.

                                                                            member Dropdowns

                                                                            Dropdowns = 'dropdowns'
                                                                            • The container of the dropdown navigation (when enabled).

                                                                            member Footer

                                                                            Footer = 'footer'
                                                                            • The root element of the footer.

                                                                            member Month

                                                                            Month = 'month'
                                                                            • Wrapper of the month grid.

                                                                            member MonthCaption

                                                                            MonthCaption = 'month_caption'
                                                                            • Contains the dropdown navigation or the caption label.

                                                                            member MonthGrid

                                                                            MonthGrid = 'month_grid'
                                                                            • The month grid.

                                                                            member Months

                                                                            Months = 'months'
                                                                            • The container of the displayed months.

                                                                            member MonthsDropdown

                                                                            MonthsDropdown = 'months_dropdown'
                                                                            • The dropdown with the months.

                                                                            member Nav

                                                                            Nav = 'nav'
                                                                            • The navigation bar with the previous and next buttons.

                                                                            member Root

                                                                            Root = 'root'
                                                                            • The root component displaying the months and the navigation bar.

                                                                            member Week

                                                                            Week = 'week'
                                                                            • The row containing the week.

                                                                            member Weekday

                                                                            Weekday = 'weekday'
                                                                            • The column header with the weekday.

                                                                            member Weekdays

                                                                            Weekdays = 'weekdays'
                                                                            • The row grouping the weekdays in the column headers.

                                                                            member WeekNumber

                                                                            WeekNumber = 'week_number'
                                                                            • The row header containing the week number.

                                                                            member WeekNumberHeader

                                                                            WeekNumberHeader = 'week_number_header'
                                                                            • The row header containing the week number.

                                                                            member Weeks

                                                                            Weeks = 'weeks'
                                                                            • The group of row weeks in a month.

                                                                            member YearsDropdown

                                                                            YearsDropdown = 'years_dropdown'
                                                                            • The dropdown with the years.

                                                                            Type Aliases

                                                                            type ButtonProps

                                                                            type ButtonProps = Parameters<typeof Button>[0];

                                                                              type CaptionLabelProps

                                                                              type CaptionLabelProps = Parameters<typeof CaptionLabel>[0];

                                                                                type CaptionProps

                                                                                type CaptionProps = MonthCaptionProps;
                                                                                • Deprecated

                                                                                  This type has been renamed. Use MonthCaptionProps instead.

                                                                                type ClassNames

                                                                                type ClassNames = {
                                                                                [key in UI | SelectionState | DayFlag]: string;
                                                                                };
                                                                                • The CSS classnames to use for the UI elements, the SelectionState and the DayFlag.

                                                                                  Example 1

                                                                                  const classNames: ClassNames = { [UI.Root]: "root", [UI.Outside]: "outside", [UI.Nav]: "nav" // etc. };

                                                                                type ContextProvidersProps

                                                                                type ContextProvidersProps = any;
                                                                                • Deprecated

                                                                                  This type is not used anymore.

                                                                                type CustomComponents

                                                                                type CustomComponents = {
                                                                                /** Render any button element in DayPicker. */
                                                                                Button: typeof components.Button;
                                                                                /** Render the chevron icon used in the navigation buttons and dropdowns. */
                                                                                Chevron: typeof components.Chevron;
                                                                                /** Render the caption label of the month grid. */
                                                                                CaptionLabel: typeof components.CaptionLabel;
                                                                                /** Render the day cell in the month grid. */
                                                                                Day: typeof components.Day;
                                                                                /** Render the button containing the day in the day cell. */
                                                                                DayButton: typeof components.DayButton;
                                                                                /** Render the dropdown element to select years and months. */
                                                                                Dropdown: typeof components.Dropdown;
                                                                                /** Render the container of the dropdowns. */
                                                                                DropdownNav: typeof components.DropdownNav;
                                                                                /** Render the footer element announced by screen readers. */
                                                                                Footer: typeof components.Footer;
                                                                                /** Render the container of the MonthGrid. */
                                                                                Month: typeof components.Month;
                                                                                /** Render the caption of the month grid. */
                                                                                MonthCaption: typeof components.MonthCaption;
                                                                                /** Render the grid of days in a month. */
                                                                                MonthGrid: typeof components.MonthGrid;
                                                                                /** Wrapper of the month grids. */
                                                                                Months: typeof components.Months;
                                                                                /** Render the navigation element with the next and previous buttons. */
                                                                                Nav: typeof components.Nav;
                                                                                /** Render the `<option>` HTML element in the dropdown. */
                                                                                Option: typeof components.Option;
                                                                                /** Render the root element of the calendar. */
                                                                                Root: typeof components.Root;
                                                                                /** Render the select element in the dropdowns. */
                                                                                Select: typeof components.Select;
                                                                                /** Render the weeks section in the month grid. */
                                                                                Weeks: typeof components.Weeks;
                                                                                /** Render the week rows. */
                                                                                Week: typeof components.Week;
                                                                                /** Render the weekday name in the header. */
                                                                                Weekday: typeof components.Weekday;
                                                                                /** Render the row containing the week days. */
                                                                                Weekdays: typeof components.Weekdays;
                                                                                /** Render the cell with the number of the week. */
                                                                                WeekNumber: typeof components.WeekNumber;
                                                                                /** Render the header of the week number column. */
                                                                                WeekNumberHeader: typeof components.WeekNumberHeader;
                                                                                };
                                                                                • The components that can be changed using the components prop.

                                                                                  See Also

                                                                                  • https://daypicker.dev/guides/custom-components

                                                                                type DateAfter

                                                                                type DateAfter = {
                                                                                after: Date;
                                                                                };
                                                                                • Match a day falling after the specified date, with the date not included.

                                                                                  Example 1

                                                                                  // Match days after the 2nd of February 2019 const matcher: DateAfter = { after: new Date(2019, 1, 2) };

                                                                                type DateBefore

                                                                                type DateBefore = {
                                                                                before: Date;
                                                                                };
                                                                                • Match a day falling before the specified date, with the date not included.

                                                                                  Example 1

                                                                                  // Match days before the 2nd of February 2019 const matcher: DateBefore = { before: new Date(2019, 1, 2) };

                                                                                type DateInterval

                                                                                type DateInterval = {
                                                                                before: Date;
                                                                                after: Date;
                                                                                };
                                                                                • An interval of dates. Differently from DateRange, the range ends here are not included.

                                                                                  Example 1

                                                                                  // Match the days between the 2nd and the 5th of February 2019 const matcher: DateInterval = { after: new Date(2019, 1, 2), before: new Date(2019, 1, 5) };

                                                                                type DateLib

                                                                                type DateLib = typeof dateLib;

                                                                                type DateRange

                                                                                type DateRange = {
                                                                                from: Date | undefined;
                                                                                to?: Date | undefined;
                                                                                };
                                                                                • A range of dates. The range can be open. Differently from DateInterval, the range ends here are included.

                                                                                  Example 1

                                                                                  // Match the days between the 2nd and the 5th of February 2019 const matcher: DateRange = { from: new Date(2019, 1, 2), to: new Date(2019, 1, 5) };

                                                                                type DayButtonProps

                                                                                type DayButtonProps = Parameters<typeof DayButton>[0];

                                                                                  type DayClickEventHandler

                                                                                  type DayClickEventHandler = DayEventHandler<React.MouseEvent>;

                                                                                  type DayEventHandler

                                                                                  type DayEventHandler<EventType> = (
                                                                                  date: Date,
                                                                                  modifiers: Modifiers,
                                                                                  e: EventType
                                                                                  ) => void;
                                                                                  • The event handler triggered when clicking or interacting with a day.

                                                                                    EventType - The event type that triggered the event (e.g. React.MouseEvent, React.KeyboardEvent, etc.).

                                                                                    Parameter date

                                                                                    The date that has triggered the event.

                                                                                    Parameter modifiers

                                                                                    The modifiers belonging to the date.

                                                                                    Parameter e

                                                                                    The DOM event that triggered the event.

                                                                                  type DayFocusEventHandler

                                                                                  type DayFocusEventHandler = DayEventHandler<React.FocusEvent | React.KeyboardEvent>;
                                                                                  • Deprecated

                                                                                    This type will be removed. Use `DayEventHandler<React.FocusEvent | React.KeyboardEvent>` instead.

                                                                                  type DayKeyboardEventHandler

                                                                                  type DayKeyboardEventHandler = DayEventHandler<React.KeyboardEvent>;
                                                                                  • Deprecated

                                                                                    This type will be removed. Use DayEventHandler<React.KeyboardEvent> instead.

                                                                                  type DayLabel

                                                                                  type DayLabel = typeof labelDayButton;
                                                                                  • Deprecated

                                                                                    Use typeof labelDayButton instead.

                                                                                  type DayMouseEventHandler

                                                                                  type DayMouseEventHandler = DayEventHandler<React.MouseEvent>;
                                                                                  • Deprecated

                                                                                    This type will be removed. Use DayEventHandler<React.MouseEvent> instead.

                                                                                  type DayOfWeek

                                                                                  type DayOfWeek = {
                                                                                  dayOfWeek: number | number[];
                                                                                  };
                                                                                  • Match dates being one of the specified days of the week (0-6, where 0 is Sunday).

                                                                                    Example 1

                                                                                    // Match Sundays const matcher: DayOfWeek = { dayOfWeek: 0 }; // Match weekends const matcher: DayOfWeek = { dayOfWeek: [0, 6] };

                                                                                  type DayPickerContext

                                                                                  type DayPickerContext<T extends DayPickerProps> = {
                                                                                  /** The months displayed in the calendar. */
                                                                                  months: CalendarMonth[];
                                                                                  /** The next month to display. */
                                                                                  nextMonth: Date | undefined;
                                                                                  /** The previous month to display. */
                                                                                  previousMonth: Date | undefined;
                                                                                  /** Navigate to the specified month. Will fire the `onMonthChange` callback. */
                                                                                  goToMonth: (month: Date) => void;
                                                                                  /** Returns the modifiers for the given day. */
                                                                                  getModifiers: (day: CalendarDay) => Modifiers;
                                                                                  /** The selected date(s). */
                                                                                  selected: SelectedValue<T> | undefined;
                                                                                  /** Set a selection. */
                                                                                  select: SelectHandler<T> | undefined;
                                                                                  /** Whether the given date is selected. */
                                                                                  isSelected: ((date: Date) => boolean) | undefined;
                                                                                  };

                                                                                    type DayPickerDefaultProps

                                                                                    type DayPickerDefaultProps = NonNullable<unknown>;
                                                                                    • Deprecated

                                                                                      This type will be removed. Use NonNullable<unknown> instead

                                                                                    type DayPickerMultipleProps

                                                                                    type DayPickerMultipleProps = PropsMulti;
                                                                                    • Deprecated

                                                                                      This type has been renamed. Use PropsMulti instead.

                                                                                    type DayPickerProps

                                                                                    type DayPickerProps = PropsBase &
                                                                                    (
                                                                                    | PropsSingle
                                                                                    | PropsSingleRequired
                                                                                    | PropsMulti
                                                                                    | PropsMultiRequired
                                                                                    | PropsRange
                                                                                    | PropsRangeRequired
                                                                                    | {
                                                                                    mode?: undefined;
                                                                                    required?: undefined;
                                                                                    }
                                                                                    );
                                                                                    • The props for the <DayPicker /> component.

                                                                                      DayPicker

                                                                                    type DayPickerProviderProps

                                                                                    type DayPickerProviderProps = any;
                                                                                    • Deprecated

                                                                                      This type is not used anymore.

                                                                                    type DayPickerRangeProps

                                                                                    type DayPickerRangeProps = PropsRange;
                                                                                    • Deprecated

                                                                                      This type has been renamed. Use PropsRange instead.

                                                                                    type DayPickerSingleProps

                                                                                    type DayPickerSingleProps = PropsSingle;
                                                                                    • Deprecated

                                                                                      This type has been renamed. Use PropsSingle instead.

                                                                                    type DayPointerEventHandler

                                                                                    type DayPointerEventHandler = DayEventHandler<React.PointerEvent>;
                                                                                    • Deprecated

                                                                                      This type will be removed. Use DayEventHandler<React.PointerEvent> instead.

                                                                                    type DayProps

                                                                                    type DayProps = Parameters<typeof Day>[0];

                                                                                      type DaySelectionMode

                                                                                      type DaySelectionMode = Mode;
                                                                                      • Deprecated

                                                                                        This type has been renamed. Use Mode instead.

                                                                                      type DayTouchEventHandler

                                                                                      type DayTouchEventHandler = DayEventHandler<React.TouchEvent>;
                                                                                      • Deprecated

                                                                                        This type will be removed. Use DayEventHandler<React.TouchEvent> instead.

                                                                                      type DropdownNavProps = Parameters<typeof DropdownNav>[0];
                                                                                        type DropdownOption = {
                                                                                        /** The value of the option. */
                                                                                        value: number;
                                                                                        /** The label of the option. */
                                                                                        label: string;
                                                                                        /**
                                                                                        * The dropdown option is disabled when it cannot be selected because out of
                                                                                        * the calendar range.
                                                                                        */
                                                                                        disabled: boolean;
                                                                                        };
                                                                                        • An option to use in the dropdown. Maps to the <option> HTML element.

                                                                                        type DropdownProps = Parameters<typeof Dropdown>[0];

                                                                                          type FooterProps

                                                                                          type FooterProps = Parameters<typeof Footer>[0];

                                                                                            type FormatOptions

                                                                                            type FormatOptions = DateFnsFormatOptions;

                                                                                            type Formatters

                                                                                            type Formatters = {
                                                                                            /** Format the caption of a month grid. */
                                                                                            formatCaption: typeof formatCaption;
                                                                                            /** @deprecated Use {@link Formatters.formatCaption} instead. */
                                                                                            formatMonthCaption: typeof formatMonthCaption;
                                                                                            /** Format the label in the month dropdown. */
                                                                                            formatMonthDropdown: typeof formatMonthDropdown;
                                                                                            /** @deprecated Use {@link Formatters.formatYearDropdown} instead. */
                                                                                            formatYearCaption: typeof formatYearCaption;
                                                                                            /** Format the label in the year dropdown. */
                                                                                            formatYearDropdown: typeof formatYearDropdown;
                                                                                            /** Format the day in the day cell. */
                                                                                            formatDay: typeof formatDay;
                                                                                            /** Format the week number. */
                                                                                            formatWeekNumber: typeof formatWeekNumber;
                                                                                            /** Format the week day name in the header. */
                                                                                            formatWeekdayName: typeof formatWeekdayName;
                                                                                            };
                                                                                            • Represent a map of formatters used to render localized content.

                                                                                            type HeadRow

                                                                                            type HeadRow = any;
                                                                                            • See Also

                                                                                              • https://daypicker.dev/guides/custom-components

                                                                                              Deprecated

                                                                                              This component has been removed. Components

                                                                                            type LabelOptions

                                                                                            type LabelOptions = DateFnsFormatOptions;

                                                                                            type Labels

                                                                                            type Labels = {
                                                                                            /** The label for the navigation toolbar. */
                                                                                            labelNav: typeof labelNav;
                                                                                            /** The label for the month grid. */
                                                                                            labelGrid: typeof labelGrid;
                                                                                            /** The label for the gridcell, when the calendar is not interactive. */
                                                                                            labelGridcell: typeof labelGridcell;
                                                                                            /** The label for the month dropdown. */
                                                                                            labelMonthDropdown: typeof labelMonthDropdown;
                                                                                            /** The label for the year dropdown. */
                                                                                            labelYearDropdown: typeof labelYearDropdown;
                                                                                            /** The label for the "next month" button. */
                                                                                            labelNext: typeof labelNext;
                                                                                            /** The label for the "previous month" button. */
                                                                                            labelPrevious: typeof labelPrevious;
                                                                                            /** The label for the day button.. */
                                                                                            labelDayButton: typeof labelDayButton;
                                                                                            /** @deprecated Use {@link labelDayButton} instead. */
                                                                                            labelDay: typeof labelDayButton;
                                                                                            /** The label for the weekday. */
                                                                                            labelWeekday: typeof labelWeekday;
                                                                                            /** The label for the week number. */
                                                                                            labelWeekNumber: typeof labelWeekNumber;
                                                                                            /**
                                                                                            * Return the label for the column of the week number.
                                                                                            *
                                                                                            * @since 9.0.0
                                                                                            */
                                                                                            labelWeekNumberHeader: typeof labelWeekNumberHeader;
                                                                                            };
                                                                                            • Map of functions to translate ARIA labels for the relative elements.

                                                                                            type Locale

                                                                                            type Locale = DateFnsLocale;
                                                                                            • The locale used within DayPicker.

                                                                                            type Matcher

                                                                                            type Matcher =
                                                                                            | boolean
                                                                                            | ((date: Date) => boolean)
                                                                                            | Date
                                                                                            | Date[]
                                                                                            | DateRange
                                                                                            | DateBefore
                                                                                            | DateAfter
                                                                                            | DateInterval
                                                                                            | DayOfWeek;
                                                                                            • A value or a function that matches a specific day.

                                                                                              Example 1

                                                                                              // will always match the day const booleanMatcher: Matcher = true;

                                                                                              // will match the today's date const dateMatcher: Matcher = new Date();

                                                                                              // will match the days in the array const arrayMatcher: Matcher = [ new Date(2019, 1, 2), new Date(2019, 1, 4) ];

                                                                                              // will match days after the 2nd of February 2019 const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };

                                                                                              // will match days before the 2nd of February 2019 } const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };

                                                                                              // will match Sundays const dayOfWeekMatcher: DayOfWeek = { dayOfWeek: 0 };

                                                                                              // will match the included days, except the two dates const intervalMatcher: DateInterval = { after: new Date(2019, 1, 2), before: new Date(2019, 1, 5) };

                                                                                              // will match the included days, including the two dates const rangeMatcher: DateRange = { from: new Date(2019, 1, 2), to: new Date(2019, 1, 5) };

                                                                                              // will match when the function return true const functionMatcher: Matcher = (day: Date) => { return day.getMonth() === 2; // match when month is March };

                                                                                            type Mode

                                                                                            type Mode = 'single' | 'multiple' | 'range';
                                                                                            • Selection modes supported by DayPicker.

                                                                                              - single: use DayPicker to select single days. - multiple: allow selecting multiple days. - range: use DayPicker to select a range of days.

                                                                                              See Also

                                                                                              • https://daypicker.dev/docs/selection-modes

                                                                                            type Modifier

                                                                                            type Modifier = string;
                                                                                            • Deprecated

                                                                                              This type will be removed. Use string instead;

                                                                                            type Modifiers

                                                                                            type Modifiers = Record<string, boolean>;
                                                                                            • The modifiers that are matching a day in the calendar.

                                                                                              Example 1

                                                                                              const modifiers: Modifiers = { today: false, // the day is not today selected: true, // the day is selected weekend: false // the day is not in the weekend // etc };

                                                                                            type ModifiersClassNames

                                                                                            type ModifiersClassNames = Record<string, string>;
                                                                                            • The classnames to assign to each day element matching a modifier.

                                                                                              Example 1

                                                                                              const modifiersClassNames: ModifiersClassNames = { today: "today", // Use the "today" class for the today's day selected: "highlight", // Use the "highlight" class for the selected day weekend: "weekend" // Use the "weekend" class for the weekend days };

                                                                                            type ModifiersStyles

                                                                                            type ModifiersStyles = Record<string, CSSProperties>;
                                                                                            • The style to apply to each day element matching a modifier.

                                                                                              Example 1

                                                                                              const modifiersStyles: ModifiersStyles = { today: { color: "red" }, selected: { backgroundColor: "blue" }, weekend: { color: "green" } };

                                                                                            type MonthCaptionProps

                                                                                            type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

                                                                                              type MonthChangeEventHandler

                                                                                              type MonthChangeEventHandler = (month: Date) => void;
                                                                                              • The event handler when a month is changed in the calendar.

                                                                                                <DayPicker onMonthChange={(month) => console.log(month)} />

                                                                                                See Also

                                                                                                • https://daypicker.dev/docs/navigation

                                                                                              type MonthGridProps

                                                                                              type MonthGridProps = Parameters<typeof MonthGrid>[0];

                                                                                                type MonthProps

                                                                                                type MonthProps = Parameters<typeof Month>[0];

                                                                                                  type MonthsProps

                                                                                                  type MonthsProps = Parameters<typeof Months>[0];

                                                                                                    type MoveFocusBy

                                                                                                    type MoveFocusBy = 'day' | 'week' | 'startOfWeek' | 'endOfWeek' | 'month' | 'year';
                                                                                                    • The temporal unit to move the focus by.

                                                                                                    type MoveFocusDir

                                                                                                    type MoveFocusDir = 'after' | 'before';
                                                                                                    • The direction to move the focus relative to the current focused date.

                                                                                                    type NavButtonLabel = typeof labelNext;
                                                                                                    • Deprecated

                                                                                                      Use typeof labelNext or typeof labelPrevious instead.

                                                                                                    type NavProps = Parameters<typeof Nav>[0];

                                                                                                      type OptionProps

                                                                                                      type OptionProps = Parameters<typeof Option>[0];

                                                                                                        type RootProps

                                                                                                        type RootProps = Parameters<typeof Root>[0];

                                                                                                          type RootProvider

                                                                                                          type RootProvider = any;
                                                                                                          • Deprecated

                                                                                                            This type will be removed.

                                                                                                          type RootProviderProps

                                                                                                          type RootProviderProps = any;
                                                                                                          • Deprecated

                                                                                                            This type will be removed.

                                                                                                          type RowProps

                                                                                                          type RowProps = WeekProps;
                                                                                                          • Deprecated

                                                                                                            This type has been removed. Use WeekProps instead.

                                                                                                          type SelectedMulti

                                                                                                          type SelectedMulti<
                                                                                                          T extends {
                                                                                                          required?: boolean;
                                                                                                          }
                                                                                                          > = T['required'] extends true ? Date[] : Date[] | undefined;

                                                                                                            type SelectedRange

                                                                                                            type SelectedRange<
                                                                                                            T extends {
                                                                                                            required?: boolean;
                                                                                                            }
                                                                                                            > = T['required'] extends true ? DateRange : DateRange | undefined;

                                                                                                              type SelectedSingle

                                                                                                              type SelectedSingle<
                                                                                                              T extends {
                                                                                                              required?: boolean;
                                                                                                              }
                                                                                                              > = T['required'] extends true ? Date : Date | undefined;

                                                                                                                type SelectedValue

                                                                                                                type SelectedValue<T> = T extends {
                                                                                                                mode: 'single';
                                                                                                                required?: boolean;
                                                                                                                }
                                                                                                                ? SelectedSingle<T>
                                                                                                                : T extends {
                                                                                                                mode: 'multiple';
                                                                                                                required?: boolean;
                                                                                                                }
                                                                                                                ? SelectedMulti<T>
                                                                                                                : T extends {
                                                                                                                mode: 'range';
                                                                                                                required?: boolean;
                                                                                                                }
                                                                                                                ? SelectedRange<T>
                                                                                                                : undefined;

                                                                                                                  type SelectHandler

                                                                                                                  type SelectHandler<T extends DayPickerProps> = T extends {
                                                                                                                  mode: 'single';
                                                                                                                  }
                                                                                                                  ? SelectHandlerSingle<T>
                                                                                                                  : T extends {
                                                                                                                  mode: 'multiple';
                                                                                                                  }
                                                                                                                  ? SelectHandlerMulti<T>
                                                                                                                  : T extends {
                                                                                                                  mode: 'range';
                                                                                                                  }
                                                                                                                  ? SelectHandlerRange<T>
                                                                                                                  : undefined;

                                                                                                                    type SelectHandlerMulti

                                                                                                                    type SelectHandlerMulti<T extends DayPickerProps> = (
                                                                                                                    triggerDate: Date,
                                                                                                                    modifiers: Modifiers,
                                                                                                                    e: React.MouseEvent | React.KeyboardEvent
                                                                                                                    ) => T['required'] extends true ? Date[] : Date[] | undefined;

                                                                                                                      type SelectHandlerRange

                                                                                                                      type SelectHandlerRange<T extends DayPickerProps> = (
                                                                                                                      triggerDate: Date,
                                                                                                                      modifiers: Modifiers,
                                                                                                                      e: React.MouseEvent | React.KeyboardEvent
                                                                                                                      ) => T['required'] extends true ? DateRange : DateRange | undefined;

                                                                                                                        type SelectHandlerSingle

                                                                                                                        type SelectHandlerSingle<T extends DayPickerProps> = (
                                                                                                                        triggerDate: Date,
                                                                                                                        modifiers: Modifiers,
                                                                                                                        e: React.MouseEvent | React.KeyboardEvent
                                                                                                                        ) => T['required'] extends true ? Date : Date | undefined;

                                                                                                                          type Selection

                                                                                                                          type Selection<T extends DayPickerProps> = {
                                                                                                                          /** The selected date(s). */
                                                                                                                          selected: SelectedValue<T> | undefined;
                                                                                                                          /** Set a selection. */
                                                                                                                          select: SelectHandler<T> | undefined;
                                                                                                                          /** Whether the given date is selected. */
                                                                                                                          isSelected: (date: Date) => boolean;
                                                                                                                          };

                                                                                                                            type SelectMultipleEventHandler

                                                                                                                            type SelectMultipleEventHandler = PropsMulti['onSelect'];
                                                                                                                            • Deprecated

                                                                                                                              This type will be removed. Use SelectHandler<"multiple"> instead.

                                                                                                                            type SelectProps

                                                                                                                            type SelectProps = Parameters<typeof Select>[0];

                                                                                                                              type SelectRangeEventHandler

                                                                                                                              type SelectRangeEventHandler = PropsRange['onSelect'];
                                                                                                                              • Deprecated

                                                                                                                                This type will be removed. Use SelectHandler<"range"> instead.

                                                                                                                              type SelectSingleEventHandler

                                                                                                                              type SelectSingleEventHandler = PropsSingle['onSelect'];
                                                                                                                              • Deprecated

                                                                                                                                This type will be removed. Use SelectHandler<"single"> instead.

                                                                                                                              type Styles

                                                                                                                              type Styles = {
                                                                                                                              [key in UI | SelectionState | DayFlag]: CSSProperties | undefined;
                                                                                                                              };

                                                                                                                              type useDayRender

                                                                                                                              type useDayRender = any;
                                                                                                                              • See Also

                                                                                                                                • https://daypicker.dev/guides/custom-components

                                                                                                                                Deprecated

                                                                                                                                This hook has been removed. Use a custom Day component instead. Hooks

                                                                                                                              type V9DeprecatedProps

                                                                                                                              type V9DeprecatedProps =
                                                                                                                              /** Use `hidden` prop instead. */
                                                                                                                              | 'fromDate'
                                                                                                                              /** Use `hidden` prop instead. */
                                                                                                                              | 'toDate'
                                                                                                                              /** Use `startMonth` instead. */
                                                                                                                              | 'fromMonth'
                                                                                                                              /** Use `endMonth` instead. */
                                                                                                                              | 'toMonth'
                                                                                                                              /** Use `startMonth` instead. */
                                                                                                                              | 'fromYear'
                                                                                                                              /** Use `endMonth` instead. */
                                                                                                                              | 'toYear';
                                                                                                                              • The props that have been deprecated since version 9.0.0.

                                                                                                                                9.0.0

                                                                                                                                See Also

                                                                                                                                • https://daypicker.dev/upgrading

                                                                                                                              type WeekdayLabel

                                                                                                                              type WeekdayLabel = typeof labelWeekday;
                                                                                                                              • Deprecated

                                                                                                                                Use typeof labelWeekday instead.

                                                                                                                              type WeekdayProps

                                                                                                                              type WeekdayProps = Parameters<typeof Weekday>[0];

                                                                                                                                type WeekdaysProps

                                                                                                                                type WeekdaysProps = Parameters<typeof Weekdays>[0];

                                                                                                                                  type WeekNumberHeaderProps

                                                                                                                                  type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0];

                                                                                                                                    type WeekNumberLabel

                                                                                                                                    type WeekNumberLabel = typeof labelWeekNumber;
                                                                                                                                    • Deprecated

                                                                                                                                      Use typeof labelWeekNumber instead.

                                                                                                                                    type WeekNumberProps

                                                                                                                                    type WeekNumberProps = Parameters<typeof WeekNumber>[0];

                                                                                                                                      type WeekProps

                                                                                                                                      type WeekProps = Parameters<typeof Week>[0];

                                                                                                                                        type WeeksProps

                                                                                                                                        type WeeksProps = Parameters<typeof Weeks>[0];

                                                                                                                                          Namespaces

                                                                                                                                          namespace *.module.css

                                                                                                                                          module '*.module.css' {}

                                                                                                                                            variable classes

                                                                                                                                            const classes: { [key: string]: string };

                                                                                                                                              Package Files (58)

                                                                                                                                              Dependencies (1)

                                                                                                                                              Dev Dependencies (38)

                                                                                                                                              Peer Dependencies (1)

                                                                                                                                              Badge

                                                                                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-day-picker.

                                                                                                                                              • Markdown
                                                                                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-day-picker)
                                                                                                                                              • HTML
                                                                                                                                                <a href="https://www.jsdocs.io/package/react-day-picker"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>