react-day-picker

react-day-picker

Version 9.4.2
Published 2 days ago
1.22 MB
2 dependencies
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

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 dateLib

const dateLib: DateLib;

Deprecated
Use defaultDateLib.

variable dayPickerContext

const dayPickerContext: any;

variable defaultDateLib

const defaultDateLib: DateLib;

The default date library with English locale.
9.2.0

variable formatMonthCaption

const formatMonthCaption: (
    month: Date,
    options?: DateLibOptions,
    dateLib?: DateLib
) => string;

Deprecated
Use formatCaption instead. Formatters

variable formatYearCaption

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

Deprecated
Use formatYearDropdown instead. Formatters

variable isMatch

const isMatch: (
    date: Date,
    matchers: Matcher | Matcher[],
    dateLib?: DateLib
) => boolean;

Deprecated
Use dateMatchModifiers instead.

variable labelCaption

const labelCaption: (
    date: Date,
    options?: DateLibOptions,
    dateLib?: DateLib
) => string;

Deprecated
Use labelGrid instead.

variable labelDay

const labelDay: (
    date: Date,
    modifiers: Modifiers,
    options?: DateLibOptions,
    dateLib?: DateLib
) => 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 { mode?: Mode; required?: boolean }
>() => DayPickerContext<T>;

Deprecated
This type has been removed to useDayPicker. Hooks

Functions

function addToRange

addToRange: (
    date: Date,
    initialRange: DateRange | undefined,
    min?: number,
    max?: number,
    required?: boolean,
    dateLib?: DateLib
) => DateRange | undefined;

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.
Deprecated
Use PreviousMonthButton or @link NextMonthButton instead.

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 date = 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)
};
dateMatchModifiers(date, [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.
Components
See Also
- https://daypicker.dev/guides/custom-components

function DayPicker

DayPicker: (props: DayPickerProps) => React.JSX.Element;

Render the date picker calendar.
DayPicker
See Also
- https://daypicker.dev

Dropdown: (
    props: {
        components: CustomComponents;
        classNames: ClassNames;
        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

function DropdownNav

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?: DateLibOptions,
    dateLib?: DateLib
) => string;

Format the caption of the month.
See Also
- https://daypicker.dev/docs/translation#custom-formatters

function formatDay

formatDay: (date: Date, options?: DateLibOptions, 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: Locale) => 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?: DateLibOptions,
    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;

Deprecated
Use rangeIncludesDate instead.

function isDateInterval

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

Returns true if matcher is of type DateInterval.
Utilities

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?: DateLibOptions,
    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?: DateLibOptions, 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?: DateLibOptions,
    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?: DateLibOptions) => 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) => string;

The ARIA label for next month button.
See Also
- https://daypicker.dev/docs/translation#aria-labels

function labelPrevious

labelPrevious: (month: Date | undefined) => string;

The ARIA label for previous month button.
See Also
- https://daypicker.dev/docs/translation#aria-labels

function labelWeekday

labelWeekday: (
    date: Date,
    options?: DateLibOptions,
    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?: DateLibOptions) => 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?: DateLibOptions) => string;

The ARIA label for the week number header element.
See Also
- https://daypicker.dev/docs/translation#aria-labels

function labelYearDropdown

labelYearDropdown: (options?: DateLibOptions) => 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

function MonthsDropdown

MonthsDropdown: (props: DropdownProps) => React.JSX.Element;

Render the dropdown to navigate between months.
Components
See Also
- https://daypicker.dev/guides/custom-components

function Nav

Nav: (
    props: {
        onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
        onNextClick?: MouseEventHandler<HTMLButtonElement>;
        previousMonth?: Date | undefined;
        nextMonth?: Date | undefined;
    } & JSX.IntrinsicElements['nav']
) => React.JSX.Element;

Render the toolbar with the navigation button.
Components
See Also
- https://daypicker.dev/guides/custom-components

function NextMonthButton

NextMonthButton: (props: JSX.IntrinsicElements) => React.JSX.Element;

Render the next month button element in the calendar.
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 PreviousMonthButton

PreviousMonthButton: (props: JSX.IntrinsicElements) => React.JSX.Element;

Render the previous month button element in the calendar.
Components
See Also
- https://daypicker.dev/guides/custom-components

function rangeContainsDayOfWeek

rangeContainsDayOfWeek: (
    range: { from: Date; to: Date },
    dayOfWeek: number | number[],
    dateLib?: DateLib
) => boolean;

Returns whether a date range contains one or more days of the week.

const range: DateRange = {
  from: new Date(2024, 8, 1), //  Sunday
  to: new Date(2024, 8, 6) //  Thursday
};
rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday

9.2.2 Utilities

function rangeContainsModifiers

rangeContainsModifiers: (
    range: { from: Date; to: Date },
    modifiers: Matcher | Matcher[],
    dateLib?: DateLib
) => boolean;

Returns whether a range contains dates that match the given modifiers.

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

9.2.2 Utilities

function rangeIncludesDate

rangeIncludesDate: (
    range: DateRange,
    date: Date,
    excludeEnds?: boolean,
    dateLib?: import('../classes/DateLib.js').DateLib
) => boolean;

Determines whether a given date is inside a specified date range.
9.0.0 Utilities

function rangeOverlaps

rangeOverlaps: (
    rangeLeft: { from: Date; to: Date },
    rangeRight: { from: Date; to: Date },
    dateLib?: import('../classes/DateLib.js').DateLib
) => boolean;

Determines whether a given range overlaps with another range.
9.2.2 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 { mode?: Mode | undefined; required?: boolean | undefined }
>() => DayPickerContext<T>;

Returns the context to work with <DayPicker /> inside custom components.
This hook provides access to the DayPicker context, which includes various properties and methods to interact with the DayPicker component. It must be used within a custom component.
T - Use this type to refine the returned context type with a specific selection mode.
Returns
{DayPickerContext} The context to work with DayPicker.
Throws
{Error} If the hook is used outside of a DayPicker provider. 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['th']
) => 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

function YearsDropdown

YearsDropdown: (props: DropdownProps) => React.JSX.Element;

Render the dropdown to navigate between years.
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?: DateLib);

property date

readonly date: Date;

The date represented by this day.

property dateLib

readonly dateLib: DateLib;

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.

class DateLib

class DateLib {}

A wrapper class around [date-fns](http://date-fns.org) sharing the same options. Methods of this class can be overridden using the PropsBase.dateLib prop.
9.2.0
Example 1
const dateLib = new DateLib({ locale: es }); const newDate = dateLib.addDays(new Date(), 5);

constructor

constructor(options?: DateLibOptions, overrides?: Partial<DateLib>);

Creates an instance of DateLib.
Parameter options
The options for the date library.
Parameter overrides
Overrides for the date library functions.

property addDays

addDays: any;

Adds the specified number of days to the given date.
Parameter date
The date to add days to.
Parameter amount
The number of days to add.
Returns
The new date with the days added.

property addMonths

addMonths: any;

Adds the specified number of months to the given date.
Parameter date
The date to add months to.
Parameter amount
The number of months to add.
Returns
The new date with the months added.

property addWeeks

addWeeks: any;

Adds the specified number of weeks to the given date.
Parameter date
The date to add weeks to.
Parameter amount
The number of weeks to add.
Returns
The new date with the weeks added.

property addYears

addYears: any;

Adds the specified number of years to the given date.
Parameter date
The date to add years to.
Parameter amount
The number of years to add.
Returns
The new date with the years added.

property Date

Date: DateConstructor;

Reference to the built-in Date constructor.

property differenceInCalendarDays

differenceInCalendarDays: any;

Returns the number of calendar days between the given dates.
Parameter dateLeft
The later date.
Parameter dateRight
The earlier date.
Returns
The number of calendar days between the dates.

property differenceInCalendarMonths

differenceInCalendarMonths: any;

Returns the number of calendar months between the given dates.
Parameter dateLeft
The later date.
Parameter dateRight
The earlier date.
Returns
The number of calendar months between the dates.

property endOfBroadcastWeek

endOfBroadcastWeek: (date: Date, dateLib: DateLib) => Date;

Returns the end of the broadcast week for the given date.
Parameter date
The original date.
Returns
The end of the broadcast week.

property endOfISOWeek

endOfISOWeek: any;

Returns the end of the ISO week for the given date.
Parameter date
The original date.
Returns
The end of the ISO week.

property endOfMonth

endOfMonth: any;

Returns the end of the month for the given date.
Parameter date
The original date.
Returns
The end of the month.

property endOfWeek

endOfWeek: any;

Returns the end of the week for the given date.
Parameter date
The original date.
Returns
The end of the week.

property endOfYear

endOfYear: any;

Returns the end of the year for the given date.
Parameter date
The original date.
Returns
The end of the year.

property format

format: any;

Formats the given date using the specified format string.
Parameter date
The date to format.
Parameter formatStr
The format string.
Returns
The formatted date string.

property getISOWeek

getISOWeek: any;

Returns the ISO week number for the given date.
Parameter date
The date to get the ISO week number for.
Returns
The ISO week number.

property getWeek

getWeek: any;

Returns the local week number for the given date.
Parameter date
The date to get the week number for.
Returns
The week number.

property isAfter

isAfter: any;

Checks if the first date is after the second date.
Parameter date
The date to compare.
Parameter dateToCompare
The date to compare with.
Returns
True if the first date is after the second date.

property isBefore

isBefore: any;

Checks if the first date is before the second date.
Parameter date
The date to compare.
Parameter dateToCompare
The date to compare with.
Returns
True if the first date is before the second date.

property isDate

isDate: (value: unknown) => value is Date;

Checks if the given value is a Date object.
Parameter value
The value to check.
Returns
True if the value is a Date object.

property isSameDay

isSameDay: any;

Checks if the given dates are on the same day.
Parameter dateLeft
The first date to compare.
Parameter dateRight
The second date to compare.
Returns
True if the dates are on the same day.

property isSameMonth

isSameMonth: any;

Checks if the given dates are in the same month.
Parameter dateLeft
The first date to compare.
Parameter dateRight
The second date to compare.
Returns
True if the dates are in the same month.

property isSameYear

isSameYear: any;

Checks if the given dates are in the same year.
Parameter dateLeft
The first date to compare.
Parameter dateRight
The second date to compare.
Returns
True if the dates are in the same year.

property max

max: any;

Returns the latest date in the given array of dates.
Parameter dates
The array of dates to compare.
Returns
The latest date.

property min

min: any;

Returns the earliest date in the given array of dates.
Parameter dates
The array of dates to compare.
Returns
The earliest date.

property options

readonly options: DateLibOptions;

The options for the date library.

property overrides

readonly overrides?: Partial<DateLib>;

Overrides for the date library functions.

property setMonth

setMonth: any;

Sets the month of the given date.
Parameter date
The date to set the month on.
Parameter month
The month to set (0-11).
Returns
The new date with the month set.

property setYear

setYear: any;

Sets the year of the given date.
Parameter date
The date to set the year on.
Parameter year
The year to set.
Returns
The new date with the year set.

property startOfBroadcastWeek

startOfBroadcastWeek: (date: Date, dateLib: DateLib) => Date;

Returns the start of the broadcast week for the given date.
Parameter date
The original date.
Returns
The start of the broadcast week.

property startOfDay

startOfDay: any;

Returns the start of the day for the given date.
Parameter date
The original date.
Returns
The start of the day.

property startOfISOWeek

startOfISOWeek: any;

Returns the start of the ISO week for the given date.
Parameter date
The original date.
Returns
The start of the ISO week.

property startOfMonth

startOfMonth: any;

Returns the start of the month for the given date.
Parameter date
The original date.
Returns
The start of the month.

property startOfWeek

startOfWeek: any;

Returns the start of the week for the given date.
Parameter date
The original date.
Returns
The start of the week.

property startOfYear

startOfYear: any;

Returns the start of the year for the given date.
Parameter date
The original date.
Returns
The start of the year.

Interfaces

interface DateLibOptions

interface DateLibOptions
    extends DateFnsFormatOptions,
        StartOfWeekOptions,
        EndOfWeekOptions {}

The options for the DateLib class.
Extends date-fns [format](https://date-fns.org/docs/format), [startOfWeek](https://date-fns.org/docs/startOfWeek) and [endOfWeek](https://date-fns.org/docs/endOfWeek) options.
9.2.0

property Date

Date?: typeof Date;

A constructor for the Date object.

property locale

locale?: Locale;

A locale to use for formatting dates.

interface PropsBase

interface PropsBase {}

Props for customizing the calendar, handling localization, and managing events. These exclude the selection mode props.
DayPicker
See Also
- https://daypicker.dev/api/interfaces/PropsBase

property ["aria-label"]

['aria-label']?: string;

The aria-label attribute to add to the container element.
9.4.1
See Also
- https://daypicker.dev/guides/accessibility

property autoFocus

autoFocus?: boolean;

When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled).
Use this prop when you need to focus DayPicker after a user action, for improved accessibility.
See Also
- https://daypicker.dev/guides/accessibility#autofocus

property broadcastCalendar

broadcastCalendar?: boolean;

Display the weeks in the month following the broadcast calendar. Setting this prop will ignore weekStartsOn (always Monday) and showOutsideDays will default to true.
9.4.0
See Also
- https://daypicker.dev/docs/localization#broadcast-calendar
- https://en.wikipedia.org/wiki/Broadcast_calendar

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 startMonth to 100 years ago, and endMonth to the end of 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> & Partial<DeprecatedUI<string>>;

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<typeof DateLib.prototype> | undefined;

Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver).
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 of 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

footer?: React.ReactNode | string;

Add a footer to the calendar, acting as a 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/guides/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 initialFocus

initialFocus?: boolean;

Deprecated
This prop will be removed. Use autoFocus instead.

property ISOWeek

ISOWeek?: boolean;

Use ISO week dates instead of the locale setting. Setting this prop will ignore weekStartsOn and firstWeekContainsDate.
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?: Partial<Locale> | undefined;

The locale object used to localize dates. Pass a locale from react-day-picker/locale to localize the calendar.
Example 1
import { es } from "react-day-picker/locale"; <DayPicker locale={es} />
See Also
- https://daypicker.dev/docs/localization
- https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales

property mode

mode?: Mode | undefined;

Enable the selection of a 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 onDayMouseEnter

onDayMouseEnter?: DayEventHandler<React.MouseEvent>;

Event handler when the mouse enters a day.

property onDayMouseLeave

onDayMouseLeave?: DayEventHandler<React.MouseEvent>;

Event handler when the mouse leaves a day.

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 a 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 role

role?: 'application' | 'dialog' | undefined;

The role attribute to add to the container element.
9.4.1
See Also
- https://daypicker.dev/guides/accessibility

property showOutsideDays

showOutsideDays?: boolean;

Show the outside days (days falling in the next or the previous month).
**Note:** when broadcastCalendar is set, this prop defaults to true.
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> & Partial<DeprecatedUI<React.CSSProperties>>;

Change the inline styles of the HTML elements.
See Also
- https://daypicker.dev/docs/styling

property timeZone

timeZone?: string | undefined;

The time zone (IANA or UTC offset) to use in the calendar (experimental). See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the possible values.
Time zones are supported by the TZDate object by the [@date-fns/tz](https://github.com/date-fns/tz) package. Please refer to the package documentation for more information.
9.1.1
See Also
- https://daypicker.dev/docs/time-zone
Modifiers
- @experimental

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.
DayPicker
See Also
- https://daypicker.dev/docs/selection-modes#multiple-mode

property max

max?: number;

The maximum number of selectable days.

property min

min?: number;

The minimum number of selectable days.

property mode

mode: 'multiple';

property onSelect

onSelect?: OnSelectHandler<Date[] | undefined>;

Event handler when days are selected.

property required

required?: false | undefined;

property selected

selected?: Date[] | undefined;

The selected dates.

interface PropsMultiRequired

interface PropsMultiRequired {}

The props when the multiple selection is required.
DayPicker
See Also
- https://daypicker.dev/docs/selection-modes#multiple-mode

property max

max?: number;

The maximum number of selectable days.

property min

min?: number;

The minimum number of selectable days.

property mode

mode: 'multiple';

property onSelect

onSelect?: OnSelectHandler<Date[]>;

Event handler when days are selected.

property required

required: true;

property selected

selected: Date[] | undefined;

The selected dates.

interface PropsRange

interface PropsRange {}

The props when the range selection is optional.
DayPicker
See Also
- https://daypicker.dev/docs/selection-modes#range-mode

property disabled

disabled?: Matcher | Matcher[] | undefined;

property excludeDisabled

excludeDisabled?: boolean | undefined;

When true, the range will reset when including a disabled day.
V9.0.2

property max

max?: number;

The maximum number of days to include in the range.

property min

min?: number;

The minimum number of days to include in the range.

property mode

mode: 'range';

property onSelect

onSelect?: OnSelectHandler<DateRange | undefined>;

Event handler when the selection changes.

property required

required?: false | undefined;

property selected

selected?: DateRange | undefined;

The selected range.

interface PropsRangeRequired

interface PropsRangeRequired {}

The props when the range selection is required.
DayPicker
See Also
- https://daypicker.dev/docs/selection-modes#range-mode

property disabled

disabled?: Matcher | Matcher[] | undefined;

property excludeDisabled

excludeDisabled?: boolean | undefined;

When true, the range will reset when including a disabled day.
V9.0.2

property max

max?: number;

The maximum number of days to include in the range.

property min

min?: number;

The minimum number of days to include in the range.

property mode

mode: 'range';

property onSelect

onSelect?: OnSelectHandler<DateRange>;

Event handler when a range is selected.

property required

required: true;

property selected

selected: DateRange | undefined;

The selected range.

interface PropsSingle

interface PropsSingle {}

The props when the single selection is optional.
DayPicker
See Also
- https://daypicker.dev/docs/selection-modes#single-mode

property mode

mode: 'single';

property onSelect

onSelect?: OnSelectHandler<Date | undefined>;

Event handler when a day is selected.

property required

required?: false | undefined;

property selected

selected?: Date | undefined;

The selected date.

interface PropsSingleRequired

interface PropsSingleRequired {}

The props when the single selection is required.
DayPicker
See Also
- https://daypicker.dev/docs/selection-modes#single-mode

property mode

mode: 'single';

property onSelect

onSelect?: OnSelectHandler<Date>;

Event handler when a day is selected.

property required

required: true;

property selected

selected: Date | undefined;

The selected date.

Enums

enum DayFlag

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

The flags for the UI.Day.

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 {
    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',
    NextMonthButton = 'button_next',
    PreviousMonthButton = 'button_previous',
    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 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'

The grid cell with the day's date. Extended by DayFlag and SelectionFlag.

member DayButton

DayButton = 'day_button'

The button containing the formatted day's date, inside the grid cell.

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).

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 NextMonthButton

NextMonthButton = 'button_next'

The next month button in the navigation. *
9.1.0

member PreviousMonthButton

PreviousMonthButton = 'button_previous'

The previous month button in the navigation.
9.1.0

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 cell containing the week number.

member WeekNumberHeader

WeekNumberHeader = 'week_number_header'

The cell header of the week numbers column.

member Weeks

Weeks = 'weeks'

The group of row weeks in a month (tbody).

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 ChevronProps

type ChevronProps = Parameters<typeof Chevron>[0];

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.
     *
     * @deprecated Use {@link CustomComponents.NextMonthButton} or
     *   {@link CustomComponents.PreviousMonthButton} instead.
     */
    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 previous month button element in the navigation. */
    PreviousMonthButton: typeof components.PreviousMonthButton;
    /** Render the next month button element in the navigation. */
    NextMonthButton: typeof components.NextMonthButton;
    /** 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;
    /** Render the dropdown with the months. */
    MonthsDropdown: typeof components.MonthsDropdown;
    /** Render the dropdown with the years. */
    YearsDropdown: typeof components.YearsDropdown;
};

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

Deprecated
Use DayMouseEventHandler instead.

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 {
        mode?: Mode | undefined;
        required?: boolean | undefined;
    }
> = {
    /** 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;
    /** The components used internally by DayPicker. */
    components: CustomComponents;
    /** The class names for the UI elements. */
    classNames: ClassNames;
    /** The styles for the UI elements. */
    styles: Partial<Styles> | undefined;
    /** The labels used in the user interface. */
    labels: Labels;
    /** The formatters used to format the UI elements. */
    formatters: Formatters;
    /**
     * The props as passed to the DayPicker component.
     *
     * @since 9.3.0
     */
    dayPickerProps: DayPickerProps;
};

Represents the context for the DayPicker component, providing various properties and methods to interact with the calendar.
T - The type of the DayPicker props, which must optionally include mode and required properties. This type can be used to refine the type returned by the hook.

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 DeprecatedUI

type DeprecatedUI<T extends CSSProperties | string> = {
    /**
     * This element was applied to the style of any button in DayPicker and it is
     * replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
     *
     * @deprecated
     */
    button: T;
    /**
     * This element was resetting the style of any button in DayPicker and it is
     * replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
     *
     * @deprecated
     */
    button_reset: T;
    /**
     * This element has been renamed to {@link UI.MonthCaption}.
     *
     * @deprecated
     */
    caption: T;
    /**
     * This element has been removed. Captions are styled via
     * {@link UI.MonthCaption}.
     *
     * @deprecated
     */
    caption_between: T;
    /**
     * This element has been renamed to {@link UI.Dropdowns}.
     *
     * @deprecated
     */
    caption_dropdowns: T;
    /**
     * This element has been removed. Captions are styled via
     * {@link UI.MonthCaption}.
     *
     * @deprecated
     */
    caption_end: T;
    /**
     * This element has been removed.
     *
     * @deprecated
     */
    caption_start: T;
    /**
     * This element has been renamed to {@link UI.Day}.
     *
     * @deprecated
     */
    cell: T;
    /**
     * This element has been renamed to {@link DayFlag.disabled}.
     *
     * @deprecated
     */
    day_disabled: T;
    /**
     * This element has been renamed to {@link DayFlag.hidden}.
     *
     * @deprecated
     */
    day_hidden: T;
    /**
     * This element has been renamed to {@link DayFlag.outside}.
     *
     * @deprecated
     */
    day_outside: T;
    /**
     * This element has been renamed to {@link SelectionState.range_end}.
     *
     * @deprecated
     */
    day_range_end: T;
    /**
     * This element has been renamed to {@link SelectionState.range_middle}.
     *
     * @deprecated
     */
    day_range_middle: T;
    /**
     * This element has been renamed to {@link SelectionState.range_start}.
     *
     * @deprecated
     */
    day_range_start: T;
    /**
     * This element has been renamed to {@link SelectionState.selected}.
     *
     * @deprecated
     */
    day_selected: T;
    /**
     * This element has been renamed to {@link DayFlag.today}.
     *
     * @deprecated
     */
    day_today: T;
    /**
     * This element has been removed. The dropdown icon is now {@link UI.Chevron}
     * inside a {@link UI.CaptionLabel}.
     *
     * @deprecated
     */
    dropdown_icon: T;
    /**
     * This element has been renamed to {@link UI.MonthsDropdown}.
     *
     * @deprecated
     */
    dropdown_month: T;
    /**
     * This element has been renamed to {@link UI.YearsDropdown}.
     *
     * @deprecated
     */
    dropdown_year: T;
    /**
     * This element has been removed.
     *
     * @deprecated
     */
    head: T;
    /**
     * This element has been renamed to {@link UI.Weekday}.
     *
     * @deprecated
     */
    head_cell: T;
    /**
     * This element has been renamed to {@link UI.Weekdays}.
     *
     * @deprecated
     */
    head_row: T;
    /**
     * This flag has been removed. Use `data-multiple-months` in your CSS
     * selectors.
     *
     * @deprecated
     */
    multiple_months: T;
    /**
     * This element has been removed. To style the navigation buttons, use
     * {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
     *
     * @deprecated
     */
    nav_button: T;
    /**
     * This element has been renamed to {@link UI.NextMonthButton}.
     *
     * @deprecated
     */
    nav_button_next: T;
    /**
     * This element has been renamed to {@link UI.PreviousMonthButton}.
     *
     * @deprecated
     */
    nav_button_previous: T;
    /**
     * This element has been removed. The dropdown icon is now {@link UI.Chevron}
     * inside a {@link UI.NextMonthButton} or a {@link UI.PreviousMonthButton}.
     *
     * @deprecated
     */
    nav_icon: T;
    /**
     * This element has been renamed to {@link UI.Week}.
     *
     * @deprecated
     */
    row: T;
    /**
     * This element has been renamed to {@link UI.MonthGrid}.
     *
     * @deprecated
     */
    table: T;
    /**
     * This element has been renamed to {@link UI.Weeks}.
     *
     * @deprecated
     */
    tbody: T;
    /**
     * This element has been removed. The {@link UI.Footer} is now a single element
     * below the months.
     *
     * @deprecated
     */
    tfoot: T;
    /**
     * This flag has been removed. There are no "visually hidden" elements in
     * DayPicker 9.
     *
     * @deprecated
     */
    vhidden: T;
    /**
     * This element has been renamed. Use {@link UI.WeekNumber} instead.
     *
     * @deprecated
     */
    weeknumber: T;
    /**
     * This flag has been removed. Use `data-week-numbers` in your CSS.
     *
     * @deprecated
     */
    with_weeknumber: T;
};

Deprecated UI elements and flags.
These elements were used in previous version of DayPicker and are kept here to help the transition to the new UI elements.
<DayPicker classNames={{ - cell: "my-cell", + day: "my-cell", - day: "my-day", + day_button: "my-day", - day_disabled: "my-day_disabled", + disabled: "my-day_disabled", // etc. }}/>
See Also
- https://daypicker.dev/upgrading
- https://daypicker.dev/docs/styling
Deprecated
9.0.1

type DropdownNavProps

type DropdownNavProps = Parameters<typeof DropdownNav>[0];

type DropdownOption

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

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

type FooterProps

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

type FormatOptions

type FormatOptions = DateLibOptions;

Deprecated
Use DateLibOptions instead.

type Formatters

type Formatters = {
    /** Format the caption of a month grid. */
    formatCaption: typeof formatCaption;
    /** Format the day in the day cell. */
    formatDay: typeof formatDay;
    /** Format the label in the month dropdown. */
    formatMonthDropdown: typeof formatMonthDropdown;
    /** @deprecated Use {@link Formatters.formatCaption} instead. */
    formatMonthCaption: typeof formatMonthCaption;
    /** Format the week number. */
    formatWeekNumber: typeof formatWeekNumber;
    /** Format the header of the week number column. */
    formatWeekNumberHeader: typeof formatWeekNumberHeader;
    /** Format the week day name in the header. */
    formatWeekdayName: typeof formatWeekdayName;
    /** Format the label in the year dropdown. */
    formatYearDropdown: typeof formatYearDropdown;
    /** @deprecated Use {@link Formatters.formatYearDropdown} instead. */
    formatYearCaption: typeof formatYearCaption;
};

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 InternalModifier

type InternalModifier =
    | DayFlag.disabled
    | DayFlag.hidden
    | DayFlag.focused
    | SelectionState.range_end
    | SelectionState.range_middle
    | SelectionState.range_start
    | SelectionState.selected;

Deprecated
This type will be removed. Use DayFlag or SelectionState instead.

type LabelOptions

type LabelOptions = DateLibOptions;

Deprecated
Use DateLibOptions instead.

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

Represents the modifiers that match a specific day in the calendar.
- Retrieve modifiers using the OnSelectHandler via the onSelect prop, or within custom components using the useDayPicker hook. - Includes built-in modifiers from DayFlag and SelectionState. - Add custom modifiers using the modifiers prop.
Example 1
const modifiers: Modifiers = { today: false, // the day is not today selected: true, // the day is selected disabled: false, // the day is not disabled outside: false, // the day is not outside the month focused: false, // the day is not focused
weekend: false // custom modifier example for matching a weekend booked: true // custom modifier example for matching a booked day available: false // custom modifier example for matching an available day };
See Also
- https://daypicker.dev/guides/custom-modifiers

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

type NavButtonLabel = typeof labelNext;

Deprecated
Use typeof labelNext or typeof labelPrevious instead.

type NavProps

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

type NextMonthButtonProps

type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];

type OnSelectHandler

type OnSelectHandler<T> = (
    selected: T,
    triggerDate: Date,
    modifiers: Modifiers,
    e: React.MouseEvent | React.KeyboardEvent
) => void;

Shared handler type for onSelect callback when a selection mode is set.
T - The type of the selected item. OnSelectHandler
Parameter selected
The selected item after the event.
Parameter triggerDate
The date when the event was triggered.
Parameter modifiers
The modifiers associated with the event.
Parameter e
The event object. DayPicker

type OptionProps

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

type PreviousMonthButtonProps

type PreviousMonthButtonProps = Parameters<typeof PreviousMonthButton>[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 {
        mode?: Mode | undefined;
        required?: boolean | undefined;
    }
> = 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 {
        required?: boolean | undefined;
    }
> = (
    triggerDate: Date,
    modifiers: Modifiers,
    e: React.MouseEvent | React.KeyboardEvent
) => T['required'] extends true ? Date[] : Date[] | undefined;

type SelectHandlerRange

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

type SelectHandlerSingle

type SelectHandlerSingle<
    T extends {
        required?: boolean | undefined;
    }
> = (
    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;
};

The CSS styles to use for the UI elements, the SelectionState and the DayFlag.

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 (65)

Dependencies (2)

Peer Dependencies (1)

react

Badge

To add a badge like this oneto 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>

Updated 2 days ago.
Package analyzed in 7981 ms.
Missing or incorrect documentation? Open an issue for this package.

react-day-picker

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable Caption

See Also

Deprecated

variable dateLib

Deprecated

variable dayPickerContext

variable defaultDateLib

variable formatMonthCaption

Deprecated

variable formatYearCaption

Deprecated

variable isMatch

Deprecated

variable labelCaption

Deprecated

variable labelDay

Deprecated

variable Row

See Also

Deprecated

variable useNavigation

Deprecated

Functions

function addToRange

function Button

Deprecated

function CaptionLabel

See Also

function Chevron

See Also

function dateMatchModifiers

function Day

See Also

function DayButton

See Also

function DayPicker

See Also

function Dropdown

See Also

function DropdownNav

See Also

function Footer

See Also

function formatCaption

See Also

function formatDay

See Also

function formatMonthDropdown

See Also

function formatWeekdayName

See Also

function formatWeekNumber

See Also

function formatWeekNumberHeader

See Also

function formatYearDropdown

See Also

function getDefaultClassNames

function isDateAfterType

function isDateBeforeType

function isDateInRange

Deprecated

function isDateInterval

function isDateRange

function isDatesArray

function isDayOfWeekType

function labelDayButton

See Also