react-day-picker

  • Version 8.10.0
  • Published
  • 1.23 MB
  • No 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

Functions

Interfaces

Enums

Type Aliases

Variables

variable Button

const Button: react.ForwardRefExoticComponent<any>;
  • Render a button HTML element applying the reset class name.

variable DayPickerContext

const DayPickerContext: react.Context<DayPickerContextValue>;
  • The DayPicker context shares the props passed to DayPicker within internal and custom components. It is used to set the default values and perform one-time calculations required to render the days.

    Access to this context from the useDayPicker hook.

variable FocusContext

const FocusContext: react.Context<FocusContextValue>;
  • The Focus context shares details about the focused day for the keyboard

    Access this context from the useFocusContext hook.

const NavigationContext: react.Context<NavigationContextValue>;
  • The Navigation context shares details and methods to navigate the months in DayPicker. Access this context from the useNavigation hook.

variable SelectMultipleContext

const SelectMultipleContext: react.Context<SelectMultipleContextValue>;
  • The SelectMultiple context shares details about the selected days when in multiple selection mode.

    Access this context from the useSelectMultiple hook.

variable SelectRangeContext

const SelectRangeContext: react.Context<SelectRangeContextValue>;
  • The SelectRange context shares details about the selected days when in range selection mode.

    Access this context from the useSelectRange hook.

variable SelectSingleContext

const SelectSingleContext: react.Context<SelectSingleContextValue>;
  • The SelectSingle context shares details about the selected days when in single selection mode.

    Access this context from the useSelectSingle hook.

Functions

function addToRange

addToRange: (day: Date, range?: DateRange) => 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.

function Caption

Caption: (props: CaptionProps) => JSX.Element;

function CaptionDropdowns

CaptionDropdowns: (props: CaptionProps) => JSX.Element;
  • Render a caption with the dropdowns to navigate between months and years.

function CaptionLabel

CaptionLabel: (props: CaptionLabelProps) => JSX.Element;
  • Render the caption for the displayed month. This component is used when captionLayout="buttons".

function CaptionNavigation

CaptionNavigation: (props: CaptionProps) => JSX.Element;
  • Render a caption with a button-based navigation.

function Day

Day: (props: DayProps) => JSX.Element;
  • The content of a day cell – as a button or span element according to its modifiers.

function DayContent

DayContent: (props: DayContentProps) => JSX.Element;
  • Render the content of the day cell.

function DayPicker

DayPicker: (
props:
| DayPickerDefaultProps
| DayPickerSingleProps
| DayPickerMultipleProps
| DayPickerRangeProps
) => JSX.Element;
  • DayPicker render a date picker component to let users pick dates from a calendar. See http://react-day-picker.js.org for updated documentation and examples.

    ### Customization

    DayPicker offers different customization props. For example,

    - show multiple months using numberOfMonths - display a dropdown to navigate the months via captionLayout - display the week numbers with showWeekNumbers - disable or hide days with disabled or hidden

    ### Controlling the months

    Change the initially displayed month using the defaultMonth prop. The displayed months are controlled by DayPicker and stored in its internal state. To control the months yourself, use month instead of defaultMonth and use the onMonthChange event to set it.

    To limit the months the user can navigate to, use fromDate/fromMonth/fromYear or toDate/toMonth/toYear.

    ### Selection modes

    DayPicker supports different selection mode that can be toggled using the mode prop:

    - mode="single": only one day can be selected. Use required to make the selection required. Use the onSelect event handler to get the selected days. - mode="multiple": users can select one or more days. Limit the amount of days that can be selected with the min or the max props. - mode="range": users can select a range of days. Limit the amount of days in the range with the min or the max props. - mode="default" (default): the built-in selections are disabled. Implement your own selection mode with onDayClick.

    The selection modes should cover the most common use cases. In case you need a more refined way of selecting days, use mode="default". Use the selected props and add the day event handlers to add/remove days from the selection.

    ### Modifiers

    A _modifier_ represents different styles or states for the days displayed in the calendar (like "selected" or "disabled"). Define custom modifiers using the modifiers prop.

    ### Formatters and custom component

    You can customize how the content is displayed in the date picker by using either the formatters or replacing the internal components.

    For the most common cases you want to use the formatters prop to change how the content is formatted in the calendar. Use the components prop to replace the internal components, like the navigation icons.

    ### Styling

    DayPicker comes with a default, basic style in react-day-picker/style – use it as template for your own style.

    If you are using CSS modules, pass the imported styles object the classNames props.

    You can also style the elements via inline styles using the styles prop.

    ### Form fields

    If you need to bind the date picker to a form field, you can use the useInput hooks for a basic behavior. See the useInput source as an example to bind the date picker with form fields.

    ### Localization

    To localize DayPicker, import the locale from date-fns package and use the locale prop.

    For example, to use Spanish locale:

    import { es } from 'date-fns/locale';
    <DayPicker locale={es} />

function DayPickerProvider

DayPickerProvider: (props: DayPickerProviderProps) => JSX.Element;
  • The provider for the DayPickerContext, assigning the defaults from the initial DayPicker props.

Dropdown: (props: DropdownProps) => JSX.Element;
  • Render a styled select component – displaying a caption and a custom drop-down icon.

function FocusProvider

FocusProvider: (props: FocusProviderProps) => JSX.Element;
Footer: (props: FooterProps) => JSX.Element;
  • Render the Footer component (empty as default).

Head: () => JSX.Element;
  • Render the table head.

function HeadRow

HeadRow: () => JSX.Element;
  • Render the HeadRow component - i.e. the table head row with the weekday names.

function IconDropdown

IconDropdown: (props: StyledComponent) => JSX.Element;
  • Render the icon in the styled drop-down.

function IconLeft

IconLeft: (props: StyledComponent) => JSX.Element;
  • Render the "previous month" button in the navigation.

function IconRight

IconRight: (props: StyledComponent) => JSX.Element;
  • Render the "next month" button in the navigation.

function isDateAfterType

isDateAfterType: (value: unknown) => value is DateAfter;

function isDateBeforeType

isDateBeforeType: (value: unknown) => value is DateBefore;

function isDateInterval

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

function isDateRange

isDateRange: (value: unknown) => value is DateRange;

function isDayOfWeekType

isDayOfWeekType: (value: unknown) => value is DayOfWeek;

function isDayPickerDefault

isDayPickerDefault: (props: DayPickerProps) => props is DayPickerDefaultProps;

function isDayPickerMultiple

isDayPickerMultiple: (
props: DayPickerProps | DayPickerContextValue
) => props is DayPickerMultipleProps;

function isDayPickerRange

isDayPickerRange: (
props: DayPickerProps | DayPickerContextValue
) => props is DayPickerRangeProps;

function isDayPickerSingle

isDayPickerSingle: (
props: DayPickerProps | DayPickerContextValue
) => props is DayPickerSingleProps;

function isMatch

isMatch: (day: Date, matchers: Matcher[]) => boolean;
  • Returns whether a day matches against at least one of the given Matchers.

    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.

function Months

Months: (props: MonthsProps) => JSX.Element;
  • Render the wrapper for the month grids.

NavigationProvider: (props: { children?: ReactNode }) => JSX.Element;

function RootProvider

RootProvider: (props: RootContext) => JSX.Element;
  • Provide the value for all the context providers.

function Row

Row: (props: RowProps) => JSX.Element;
  • Render a row in the calendar, with the days and the week number.

function SelectMultipleProvider

SelectMultipleProvider: (props: SelectMultipleProviderProps) => JSX.Element;

function SelectMultipleProviderInternal

SelectMultipleProviderInternal: ({
initialProps,
children,
}: SelectMultipleProviderInternalProps) => JSX.Element;

    function SelectRangeProvider

    SelectRangeProvider: (props: SelectRangeProviderProps) => JSX.Element;

    function SelectRangeProviderInternal

    SelectRangeProviderInternal: ({
    initialProps,
    children,
    }: SelectRangeProviderInternalProps) => JSX.Element;

      function SelectSingleProvider

      SelectSingleProvider: (props: SelectSingleProviderProps) => JSX.Element;

      function SelectSingleProviderInternal

      SelectSingleProviderInternal: ({
      initialProps,
      children,
      }: SelectSingleProviderInternal) => JSX.Element;

        function useActiveModifiers

        useActiveModifiers: (day: Date, displayMonth?: Date) => ActiveModifiers;
        • Return the active modifiers for the specified day.

          This hook is meant to be used inside internal or custom components.

          Parameter day

          Parameter displayMonth

        function useDayPicker

        useDayPicker: () => DayPickerContextValue;
        • Hook to access the DayPickerContextValue.

          Use the DayPicker context to access to the props passed to DayPicker inside internal or custom components.

        function useDayRender

        useDayRender: (
        day: Date,
        displayMonth: Date,
        buttonRef: RefObject<HTMLButtonElement>
        ) => DayRender;
        • Return props and data used to render the Day component.

          Use this hook when creating a component to replace the built-in Day component.

        function useFocusContext

        useFocusContext: () => FocusContextValue;
        • Hook to access the FocusContextValue. Use this hook to handle the focus state of the elements.

          This hook is meant to be used inside internal or custom components.

        function useInput

        useInput: (options?: UseInputOptions) => UseInputValue;
        • Return props and setters for binding an input field to DayPicker.

        function useNavigation

        useNavigation: () => NavigationContextValue;
        • Hook to access the NavigationContextValue. Use this hook to navigate between months or years in DayPicker.

          This hook is meant to be used inside internal or custom components.

        function useSelectMultiple

        useSelectMultiple: () => SelectMultipleContextValue;

        function useSelectRange

        useSelectRange: () => SelectRangeContextValue;

        function useSelectSingle

        useSelectSingle: () => SelectSingleContextValue;

        function WeekNumber

        WeekNumber: (props: WeekNumberProps) => JSX.Element;
        • Render the week number element. If onWeekNumberClick is passed to DayPicker, it renders a button, otherwise a span element.

        Interfaces

        interface CaptionLabelProps

        interface CaptionLabelProps {}

        property displayIndex

        displayIndex?: number | undefined;
        • The index of the month where the caption is displayed. Older custom components may miss this prop.

        property displayMonth

        displayMonth: Date;
        • The month where the caption is displayed.

        property id

        id?: string;
        • The ID for the heading element. Must be the same as the labelled-by in Table.

        interface CaptionProps

        interface CaptionProps {}
        • Represent the props of the Caption component.

        property displayIndex

        displayIndex?: number | undefined;
        • The index of the month where the caption is displayed. Older custom components may miss this prop.

        property displayMonth

        displayMonth: Date;
        • The month where the caption is displayed.

        property id

        id?: string;
        • The ID for the heading element. Must be the same as the labelled-by in Table.

        interface CustomComponents

        interface CustomComponents {}
        • Map of the components that can be changed using the components prop.

          See Also

          • https://github.com/gpbl/react-day-picker/tree/main/src/components

        property Caption

        Caption?: (props: CaptionProps) => JSX.Element | null;
        • The component for the caption element.

        property CaptionLabel

        CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
        • The component for the caption element.

        property Day

        Day?: (props: DayProps) => JSX.Element | null;
        • The component for the day element.

          Each Day in DayPicker should render one of the following, according to the return value of useDayRender.

          - an empty Fragment, to render if isHidden is true - a button element, when the day is interactive, e.g. is selectable - a div or a span element, when the day is not interactive

        property DayContent

        DayContent?: (props: DayContentProps) => JSX.Element | null;
        • The component for the content of the day element.

        property Dropdown

        Dropdown?: (props: DropdownProps) => JSX.Element | null;
        • The component for the drop-down elements.

        property Footer

        Footer?: (props: FooterProps) => JSX.Element | null;
        • The component for the table footer.

        property Head

        Head?: () => JSX.Element | null;
        • The component for the table’s head.

        property HeadRow

        HeadRow?: () => JSX.Element | null;
        • The component for the table’s head row.

        property IconDropdown

        IconDropdown?: (props: StyledComponent) => JSX.Element | null;
        • The component for the small icon in the drop-downs.

        property IconLeft

        IconLeft?: (props: StyledComponent) => JSX.Element | null;
        • The arrow left icon (used for the Navigation buttons).

        property IconRight

        IconRight?: (props: StyledComponent) => JSX.Element | null;
        • The arrow right icon (used for the Navigation buttons).

        property Months

        Months?: (props: MonthsProps) => JSX.Element | null;
        • The component wrapping the month grids.

        property Row

        Row?: (props: RowProps) => JSX.Element | null;
        • The component for the table rows.

        property WeekNumber

        WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
        • The component for the week number in the table rows.

        interface DayContentProps

        interface DayContentProps {}

        property activeModifiers

        activeModifiers: ActiveModifiers;
        • The active modifiers for the given date.

        property date

        date: Date;
        • The date representing the day.

        property displayMonth

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

        interface DayPickerBase

        interface DayPickerBase {}

        property captionLayout

        captionLayout?: CaptionLayout;
        • Change the layout of the caption:

          - buttons: display prev/right buttons - dropdown: display drop-downs to change the month and the year

          **Note:** the dropdown layout is available only when fromDate, fromMonth orfromYear and toDate, toMonth or toYear are set.

        property className

        className?: string;
        • The CSS class to add to the container element. To change the name of the class instead, use classNames.root.

        property classNames

        classNames?: ClassNames;
        • Change the class names of the HTML elements.

          Use this prop when you need to change the default class names — for example when using CSS modules.

        property components

        components?: CustomComponents;
        • Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/main/src/components) to understand how internal components are built and provide your custom components.

        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 .

        property dir

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

        property disabled

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

        property disableNavigation

        disableNavigation?: boolean;
        • Disable the navigation between months.

        property firstWeekContainsDate

        firstWeekContainsDate?: 1 | 4;
        • The day of January, which is always in the first week of the year. Can be either Monday (1) or Thursday (4).

          See Also

          • https://date-fns.org/docs/getWeek

          • https://en.wikipedia.org/wiki/Week#Numbering

          • ISOWeek.

        property fixedWeeks

        fixedWeeks?: boolean;
        • Display six weeks per months, regardless the month’s number of weeks. To use this prop, showOutsideDays must be set.

        property footer

        footer?: ReactNode;
        • Content to add to the table footer element.

        property formatters

        formatters?: Partial<Formatters>;
        • A map of formatters. Use the formatters to override the default formatting functions.

        property fromDate

        fromDate?: Date;
        • The earliest day to start the month navigation.

        property fromMonth

        fromMonth?: Date;
        • The earliest month to start the month navigation.

        property fromYear

        fromYear?: number;
        • The earliest year to start the month navigation.

        property hidden

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

        property hideHead

        hideHead?: boolean;
        • Hide the month’s head displaying the weekday names.

        property id

        id?: string;
        • A unique id to replace the random generated id – used by DayPicker for accessibility.

        property initialFocus

        initialFocus?: 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.

        property ISOWeek

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

          See Also

          • 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 labels attributes.

        property lang

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

        property locale

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

        property modifiers

        modifiers?: DayModifiers;
        • Add modifiers to the matching days.

        property modifiersClassNames

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

        property modifiersStyles

        modifiersStyles?: ModifiersStyles;
        • Change the inline style for the day matching the modifiers.

        property month

        month?: Date;

        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.

        property onDayBlur

        onDayBlur?: DayFocusEventHandler;
        • Event callback fired when the user blurs from a day.

        property onDayClick

        onDayClick?: DayClickEventHandler;
        • Event callback fired when the user clicks on a day.

        property onDayFocus

        onDayFocus?: DayFocusEventHandler;
        • Event callback fired when the user focuses on a day.

        property onDayKeyDown

        onDayKeyDown?: DayKeyboardEventHandler;
        • Event callback fired when the user presses a key on a day.

        property onDayKeyPress

        onDayKeyPress?: DayKeyboardEventHandler;
        • Event callback fired when the user presses a key on a day.

        property onDayKeyUp

        onDayKeyUp?: DayKeyboardEventHandler;
        • Event callback fired when the user presses a key on a day.

        property onDayMouseEnter

        onDayMouseEnter?: DayMouseEventHandler;
        • Event callback fired when the user hovers on a day.

        property onDayMouseLeave

        onDayMouseLeave?: DayMouseEventHandler;
        • Event callback fired when the user hovers away from a day.

        property onDayPointerEnter

        onDayPointerEnter?: DayPointerEventHandler;
        • Event callback fired when the pointer enters a day.

        property onDayPointerLeave

        onDayPointerLeave?: DayPointerEventHandler;
        • Event callback fired when the pointer leaves a day.

        property onDayTouchCancel

        onDayTouchCancel?: DayTouchEventHandler;
        • Event callback when a day touch event is canceled.

        property onDayTouchEnd

        onDayTouchEnd?: DayTouchEventHandler;
        • Event callback when a day touch event ends.

        property onDayTouchMove

        onDayTouchMove?: DayTouchEventHandler;
        • Event callback when a day touch event moves.

        property onDayTouchStart

        onDayTouchStart?: DayTouchEventHandler;
        • Event callback when a day touch event starts.

        property onMonthChange

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

        property onNextClick

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

        property onPrevClick

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

        property onWeekNumberClick

        onWeekNumberClick?: WeekNumberClickEventHandler;
        • Event callback fired when the week number is clicked. Requires showWeekNumbers set.

        property pagedNavigation

        pagedNavigation?: boolean;

        property reverseMonths

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

        property selected

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

        property showOutsideDays

        showOutsideDays?: boolean;
        • Show the outside days. An outside day is a day falling in the next or the previous month.

        property showWeekNumber

        showWeekNumber?: boolean;

        property style

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

        property styles

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

        property title

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

        property toDate

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

        property today

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

        property toMonth

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

        property toYear

        toYear?: number;
        • The latest year to end the month navigation.

        property weekStartsOn

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

          See Also

        interface DayPickerContextValue

        interface DayPickerContextValue extends DayPickerBase {}
        • The value of the DayPickerContext extends the props from DayPicker with default and cleaned up values.

        property captionLayout

        captionLayout: CaptionLayout;

          property classNames

          classNames: Required<ClassNames>;

            property formatters

            formatters: Formatters;

              property labels

              labels: Labels;

                property locale

                locale: Locale;

                  property max

                  max?: number;

                    property min

                    min?: number;

                      property mode

                      mode: DaySelectionMode;

                        property modifiers

                        modifiers: DayModifiers;

                          property modifiersClassNames

                          modifiersClassNames: ModifiersClassNames;

                            property numberOfMonths

                            numberOfMonths: number;

                              property onSelect

                              onSelect?:
                              | DayPickerSingleProps['onSelect']
                              | DayPickerMultipleProps['onSelect']
                              | DayPickerRangeProps['onSelect'];

                                property required

                                required?: boolean;

                                  property selected

                                  selected?: Matcher | Matcher[];

                                    property styles

                                    styles: Styles;

                                      property today

                                      today: Date;

                                        interface DayPickerDefaultProps

                                        interface DayPickerDefaultProps extends DayPickerBase {}
                                        • The props for the DayPicker component when using mode="default" or undefined.

                                        property mode

                                        mode?: undefined | 'default';

                                          interface DayPickerMultipleProps

                                          interface DayPickerMultipleProps extends DayPickerBase {}
                                          • The props for the DayPicker component when using mode="multiple".

                                          property max

                                          max?: number;
                                          • The maximum amount of days that can be selected.

                                          property min

                                          min?: number;
                                          • The minimum amount of days that can be selected.

                                          property mode

                                          mode: 'multiple';

                                            property onSelect

                                            onSelect?: SelectMultipleEventHandler;
                                            • Event fired when a days added or removed to the selection.

                                            property selected

                                            selected?: Date[] | undefined;
                                            • The selected days.

                                            interface DayPickerProviderProps

                                            interface DayPickerProviderProps {}

                                            property children

                                            children?: ReactNode;

                                              property initialProps

                                              initialProps: DayPickerProps;
                                              • The initial props from the DayPicker component.

                                              interface DayPickerRangeProps

                                              interface DayPickerRangeProps extends DayPickerBase {}
                                              • The props for the DayPicker component when using mode="range".

                                              property max

                                              max?: number;
                                              • The maximum amount of days that can be selected.

                                              property min

                                              min?: number;
                                              • The minimum amount of days that can be selected.

                                              property mode

                                              mode: 'range';

                                                property onSelect

                                                onSelect?: SelectRangeEventHandler;
                                                • Event fired when a range (or a part of the range) is selected.

                                                property selected

                                                selected?: DateRange | undefined;
                                                • The selected range of days.

                                                interface DayPickerSingleProps

                                                interface DayPickerSingleProps extends DayPickerBase {}
                                                • The props for the DayPicker component when using mode="single".

                                                property mode

                                                mode: 'single';

                                                  property onSelect

                                                  onSelect?: SelectSingleEventHandler;
                                                  • Event fired when a day is selected.

                                                  property required

                                                  required?: boolean;
                                                  • Make the selection required.

                                                  property selected

                                                  selected?: Date | undefined;
                                                  • The selected day.

                                                  interface DayProps

                                                  interface DayProps {}
                                                  • Represent the props used by the Day component.

                                                  property date

                                                  date: Date;
                                                  • The date to render.

                                                  property displayMonth

                                                  displayMonth: Date;
                                                  • The month where the date is displayed.

                                                  interface DropdownProps {}
                                                  ['aria-label']?: string;
                                                    caption?: ReactNode;
                                                    • The caption displayed to replace the hidden select.

                                                    children?: SelectHTMLAttributes<HTMLSelectElement>['children'];
                                                      className?: string;
                                                        name?: string;
                                                        • The name attribute of the element.

                                                        onChange?: ChangeEventHandler<HTMLSelectElement>;
                                                          style?: CSSProperties;
                                                            value?: string | number;
                                                            • The selected value.

                                                            interface FooterProps

                                                            interface FooterProps {}

                                                              property displayMonth

                                                              displayMonth?: Date;
                                                              • The month where the footer is displayed.

                                                              interface NavigationContextValue {}
                                                              currentMonth: Date;
                                                              • The month to display in the calendar. When numberOfMonths is greater than one, is the first of the displayed months.

                                                              displayMonths: Date[];
                                                              • The months rendered by DayPicker. DayPicker can render multiple months via numberOfMonths.

                                                              goToDate: (date: Date, refDate?: Date) => void;
                                                              • Navigate to the specified date.

                                                              goToMonth: (month: Date) => void;
                                                              • Navigate to the specified month.

                                                              isDateDisplayed: (day: Date) => boolean;
                                                              • Whether the given day is included in the displayed months.

                                                              nextMonth?: Date;
                                                              • The next month to display.

                                                              previousMonth?: Date;
                                                              • The previous month to display.

                                                              interface RootContext

                                                              interface RootContext {}

                                                              property children

                                                              children?: ReactNode;

                                                                interface RowProps

                                                                interface RowProps {}
                                                                • The props for the Row component.

                                                                property dates

                                                                dates: Date[];
                                                                • The days contained in the week.

                                                                property displayMonth

                                                                displayMonth: Date;
                                                                • The month where the row is displayed.

                                                                property weekNumber

                                                                weekNumber: number;
                                                                • The number of the week to render.

                                                                interface SelectMultipleContextValue

                                                                interface SelectMultipleContextValue {}

                                                                property modifiers

                                                                modifiers: SelectMultipleModifiers;
                                                                • The modifiers for the corresponding selection.

                                                                property onDayClick

                                                                onDayClick?: DayClickEventHandler;
                                                                • Event handler to attach to the day button to enable the multiple select.

                                                                property selected

                                                                selected: Date[] | undefined;
                                                                • The days that have been selected.

                                                                interface SelectMultipleProviderInternalProps

                                                                interface SelectMultipleProviderInternalProps {}

                                                                property children

                                                                children?: ReactNode;

                                                                  property initialProps

                                                                  initialProps: DayPickerMultipleProps;

                                                                    interface SelectRangeContextValue

                                                                    interface SelectRangeContextValue {}

                                                                    property modifiers

                                                                    modifiers: SelectRangeModifiers;
                                                                    • The modifiers for the corresponding selection.

                                                                    property onDayClick

                                                                    onDayClick?: DayClickEventHandler;
                                                                    • Event handler to attach to the day button to enable the range select.

                                                                    property selected

                                                                    selected: DateRange | undefined;
                                                                    • The range of days that has been selected.

                                                                    interface SelectRangeProviderInternalProps

                                                                    interface SelectRangeProviderInternalProps {}

                                                                    property children

                                                                    children?: ReactNode;

                                                                      property initialProps

                                                                      initialProps: DayPickerRangeProps;

                                                                        interface SelectRangeProviderProps

                                                                        interface SelectRangeProviderProps {}

                                                                          property children

                                                                          children?: ReactNode;

                                                                            property initialProps

                                                                            initialProps: DayPickerBase;

                                                                              interface SelectSingleContextValue

                                                                              interface SelectSingleContextValue {}

                                                                              property onDayClick

                                                                              onDayClick?: DayClickEventHandler;
                                                                              • Event handler to attach to the day button to enable the single select.

                                                                              property selected

                                                                              selected: Date | undefined;
                                                                              • The day that has been selected.

                                                                              interface SelectSingleProviderInternal

                                                                              interface SelectSingleProviderInternal {}

                                                                              property children

                                                                              children?: ReactNode;

                                                                                property initialProps

                                                                                initialProps: DayPickerSingleProps;

                                                                                  interface SelectSingleProviderProps

                                                                                  interface SelectSingleProviderProps {}

                                                                                    property children

                                                                                    children?: ReactNode;

                                                                                      property initialProps

                                                                                      initialProps: DayPickerBase;

                                                                                        interface UseInputOptions

                                                                                        interface UseInputOptions
                                                                                        extends Pick<
                                                                                        DayPickerBase,
                                                                                        | 'locale'
                                                                                        | 'fromDate'
                                                                                        | 'toDate'
                                                                                        | 'fromMonth'
                                                                                        | 'toMonth'
                                                                                        | 'fromYear'
                                                                                        | 'toYear'
                                                                                        | 'today'
                                                                                        > {}

                                                                                          property defaultSelected

                                                                                          defaultSelected?: Date;
                                                                                          • The initially selected date

                                                                                          property format

                                                                                          format?: string;
                                                                                          • The format string for formatting the input field. See https://date-fns.org/docs/format for a list of format strings.

                                                                                          property required

                                                                                          required?: boolean;
                                                                                          • Make the selection required.

                                                                                          interface UseInputValue

                                                                                          interface UseInputValue {}
                                                                                          • Represent the value returned by useInput.

                                                                                          property dayPickerProps

                                                                                          dayPickerProps: InputDayPickerProps;
                                                                                          • The props to pass to a DayPicker component.

                                                                                          property inputProps

                                                                                          inputProps: InputProps;
                                                                                          • The props to pass to an input field.

                                                                                          property reset

                                                                                          reset: () => void;
                                                                                          • A function to reset to the initial state.

                                                                                          property setSelected

                                                                                          setSelected: (day: Date | undefined) => void;
                                                                                          • A function to set the selected day.

                                                                                          interface WeekNumberProps

                                                                                          interface WeekNumberProps {}

                                                                                          property dates

                                                                                          dates: Date[];
                                                                                          • The dates in the week.

                                                                                          property number

                                                                                          number: number;
                                                                                          • The number of the week.

                                                                                          Enums

                                                                                          enum InternalModifier

                                                                                          enum InternalModifier {
                                                                                          Outside = 'outside',
                                                                                          Disabled = 'disabled',
                                                                                          Selected = 'selected',
                                                                                          Hidden = 'hidden',
                                                                                          Today = 'today',
                                                                                          RangeStart = 'range_start',
                                                                                          RangeEnd = 'range_end',
                                                                                          RangeMiddle = 'range_middle',
                                                                                          }
                                                                                          • The name of the modifiers that are used internally by DayPicker.

                                                                                          member Disabled

                                                                                          Disabled = 'disabled'
                                                                                          • Name of the modifier applied to the disabled days, using the disabled prop.

                                                                                          member Hidden

                                                                                          Hidden = 'hidden'
                                                                                          • Name of the modifier applied to the hidden days using the hidden prop).

                                                                                          member Outside

                                                                                          Outside = 'outside'

                                                                                            member RangeEnd

                                                                                            RangeEnd = 'range_end'
                                                                                            • The modifier applied to the day ending a selected range, when in range selection mode.

                                                                                            member RangeMiddle

                                                                                            RangeMiddle = 'range_middle'
                                                                                            • The modifier applied to the days between the start and the end of a selected range, when in range selection mode.

                                                                                            member RangeStart

                                                                                            RangeStart = 'range_start'
                                                                                            • The modifier applied to the day starting a selected range, when in range selection mode.

                                                                                            member Selected

                                                                                            Selected = 'selected'
                                                                                            • Name of the modifier applied to the selected days using the selected prop).

                                                                                            member Today

                                                                                            Today = 'today'
                                                                                            • Name of the modifier applied to the day specified using the today prop).

                                                                                            Type Aliases

                                                                                            type ActiveModifiers

                                                                                            type ActiveModifiers = Record<Modifier, true> &
                                                                                            Partial<Record<InternalModifier, true>>;
                                                                                            • The modifiers that are matching a day in the calendar. Use the useActiveModifiers hook to get the modifiers for a day.

                                                                                              const activeModifiers: ActiveModifiers = {
                                                                                              selected: true,
                                                                                              customModifier: true
                                                                                              }

                                                                                            type ButtonProps

                                                                                            type ButtonProps = JSX.IntrinsicElements['button'];
                                                                                            • The props for the Button component.

                                                                                            type CaptionLayout

                                                                                            type CaptionLayout = 'dropdown' | 'buttons' | 'dropdown-buttons';
                                                                                            • The layout of the caption:

                                                                                              - dropdown: display dropdowns for choosing the month and the year. - buttons: display previous month / next month buttons. - dropdown-buttons: display both month / year dropdowns and previous month / next month buttons.

                                                                                            type ClassNames

                                                                                            type ClassNames = Partial<StyledElement<string>>;
                                                                                            • The class names of each element.

                                                                                            type CustomModifiers

                                                                                            type CustomModifiers = Record<Modifier, Matcher[]>;
                                                                                            • A map of matchers used as custom modifiers by DayPicker component. This is the same as s.

                                                                                            type DateAfter

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

                                                                                            type DateBefore

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

                                                                                            type DateFormatter

                                                                                            type DateFormatter = (
                                                                                            date: Date,
                                                                                            options?: {
                                                                                            locale?: Locale;
                                                                                            }
                                                                                            ) => ReactNode;
                                                                                            • Represents a function to format a date.

                                                                                            type DateInterval

                                                                                            type DateInterval = {
                                                                                            before: Date;
                                                                                            after: Date;
                                                                                            };
                                                                                            • A matcher to match a day falling before and/or after two dates, where the dates are not included.

                                                                                            type DateRange

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

                                                                                            type DayClickEventHandler

                                                                                            type DayClickEventHandler = (
                                                                                            day: Date,
                                                                                            activeModifiers: ActiveModifiers,
                                                                                            e: MouseEvent
                                                                                            ) => void;
                                                                                            • The event handler when a day is clicked.

                                                                                            type DayFocusEventHandler

                                                                                            type DayFocusEventHandler = (
                                                                                            day: Date,
                                                                                            activeModifiers: ActiveModifiers,
                                                                                            e: FocusEvent | KeyboardEvent
                                                                                            ) => void;
                                                                                            • The event handler when a day is focused.

                                                                                            type DayKeyboardEventHandler

                                                                                            type DayKeyboardEventHandler = (
                                                                                            day: Date,
                                                                                            activeModifiers: ActiveModifiers,
                                                                                            e: KeyboardEvent
                                                                                            ) => void;
                                                                                            • The event handler when a day gets a keyboard event.

                                                                                            type DayLabel

                                                                                            type DayLabel = (
                                                                                            day: Date,
                                                                                            activeModifiers: ActiveModifiers,
                                                                                            options?: {
                                                                                            locale?: Locale;
                                                                                            }
                                                                                            ) => string;
                                                                                            • Return the ARIA label for the Day component.

                                                                                            type DayModifiers

                                                                                            type DayModifiers = Record<Modifier, Matcher | Matcher[]>;

                                                                                            type DayMouseEventHandler

                                                                                            type DayMouseEventHandler = (
                                                                                            day: Date,
                                                                                            activeModifiers: ActiveModifiers,
                                                                                            e: MouseEvent
                                                                                            ) => void;
                                                                                            • The event handler when a day gets a mouse event.

                                                                                            type DayOfWeek

                                                                                            type DayOfWeek = {
                                                                                            dayOfWeek: number[];
                                                                                            };
                                                                                            • A matcher to match a date being one of the specified days of the week (0-6, where 0 is Sunday).

                                                                                            type DayPickerProps

                                                                                            type DayPickerProps =
                                                                                            | DayPickerDefaultProps
                                                                                            | DayPickerSingleProps
                                                                                            | DayPickerMultipleProps
                                                                                            | DayPickerRangeProps;

                                                                                              type DayPointerEventHandler

                                                                                              type DayPointerEventHandler = (
                                                                                              day: Date,
                                                                                              activeModifiers: ActiveModifiers,
                                                                                              e: PointerEvent
                                                                                              ) => void;
                                                                                              • The event handler when a day gets a pointer event.

                                                                                              type DayRender

                                                                                              type DayRender = {
                                                                                              /** Whether the day should be rendered a `button` instead of a `div` */
                                                                                              isButton: boolean;
                                                                                              /** Whether the day should be hidden. */
                                                                                              isHidden: boolean;
                                                                                              /** The modifiers active for the given day. */
                                                                                              activeModifiers: ActiveModifiers;
                                                                                              /** The props to apply to the button element (when `isButton` is true). */
                                                                                              buttonProps: StyledComponent &
                                                                                              Pick<ButtonProps, 'disabled' | 'aria-selected' | 'tabIndex'> &
                                                                                              DayEventHandlers;
                                                                                              /** The props to apply to the div element (when `isButton` is false). */
                                                                                              divProps: StyledComponent;
                                                                                              selectedDays: SelectedDays;
                                                                                              };

                                                                                                type DaySelectionMode

                                                                                                type DaySelectionMode = 'single' | 'multiple' | 'range' | 'default';
                                                                                                • 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 - default: disable the built-in selection behavior. Customize what is selected by using DayPickerBase.onDayClick.

                                                                                                type DayTouchEventHandler

                                                                                                type DayTouchEventHandler = (
                                                                                                day: Date,
                                                                                                activeModifiers: ActiveModifiers,
                                                                                                e: TouchEvent
                                                                                                ) => void;
                                                                                                • The event handler when a day gets a touch event.

                                                                                                type FocusContextValue

                                                                                                type FocusContextValue = {
                                                                                                /** The day currently focused. */
                                                                                                focusedDay: Date | undefined;
                                                                                                /** Day that will be focused. */
                                                                                                focusTarget: Date | undefined;
                                                                                                /** Focus a day. */
                                                                                                focus: (day: Date) => void;
                                                                                                /** Blur the focused day. */
                                                                                                blur: () => void;
                                                                                                /** Focus the day after the focused day. */
                                                                                                focusDayAfter: () => void;
                                                                                                /** Focus the day before the focused day. */
                                                                                                focusDayBefore: () => void;
                                                                                                /** Focus the day in the week before the focused day. */
                                                                                                focusWeekBefore: () => void;
                                                                                                /** Focus the day in the week after the focused day. */
                                                                                                focusWeekAfter: () => void;
                                                                                                focusMonthBefore: () => void;
                                                                                                focusMonthAfter: () => void;
                                                                                                focusYearBefore: () => void;
                                                                                                focusYearAfter: () => void;
                                                                                                focusStartOfWeek: () => void;
                                                                                                focusEndOfWeek: () => void;
                                                                                                };

                                                                                                type FocusProviderProps

                                                                                                type FocusProviderProps = {
                                                                                                children: ReactNode;
                                                                                                };

                                                                                                  type Formatters

                                                                                                  type Formatters = {
                                                                                                  /** Format the month in the caption when `captionLayout` is `buttons`. */
                                                                                                  formatCaption: DateFormatter;
                                                                                                  /** Format the month in the navigation dropdown. */
                                                                                                  formatMonthCaption: DateFormatter;
                                                                                                  /** Format the year in the navigation dropdown. */
                                                                                                  formatYearCaption: DateFormatter;
                                                                                                  /** Format the day in the day cell. */
                                                                                                  formatDay: DateFormatter;
                                                                                                  /** Format the week number. */
                                                                                                  formatWeekNumber: WeekNumberFormatter;
                                                                                                  /** Format the week day name in the header */
                                                                                                  formatWeekdayName: DateFormatter;
                                                                                                  };
                                                                                                  • Represent a map of formatters used to render localized content.

                                                                                                  type InputDayPickerProps

                                                                                                  type InputDayPickerProps = Pick<
                                                                                                  DayPickerSingleProps,
                                                                                                  | 'fromDate'
                                                                                                  | 'toDate'
                                                                                                  | 'locale'
                                                                                                  | 'month'
                                                                                                  | 'onDayClick'
                                                                                                  | 'onMonthChange'
                                                                                                  | 'selected'
                                                                                                  | 'today'
                                                                                                  >;
                                                                                                  • The props to attach to the DayPicker component when using useInput.

                                                                                                  type InputProps

                                                                                                  type InputProps = Pick<
                                                                                                  InputHTMLAttributes<HTMLInputElement>,
                                                                                                  'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'
                                                                                                  >;
                                                                                                  • The props to attach to the input field when using useInput.

                                                                                                  type InternalModifiers

                                                                                                  type InternalModifiers = Record<InternalModifier, Matcher[]>;
                                                                                                  • Map of matchers used for the internal modifiers.

                                                                                                  type InternalModifiersElement

                                                                                                  type InternalModifiersElement =
                                                                                                  | 'day_outside'
                                                                                                  | 'day_selected'
                                                                                                  | 'day_disabled'
                                                                                                  | 'day_hidden'
                                                                                                  | 'day_range_start'
                                                                                                  | 'day_range_end'
                                                                                                  | 'day_range_middle'
                                                                                                  | 'day_today';
                                                                                                  • These elements must not be in the styles or classNames records as they are styled via the modifiersStyles or modifiersClassNames pop

                                                                                                  type Labels

                                                                                                  type Labels = {
                                                                                                  labelMonthDropdown: () => string;
                                                                                                  labelYearDropdown: () => string;
                                                                                                  labelNext: NavButtonLabel;
                                                                                                  labelPrevious: NavButtonLabel;
                                                                                                  /** @deprecated This label is not used anymore and this function will be removed in the future. */
                                                                                                  labelDay: DayLabel;
                                                                                                  labelWeekday: WeekdayLabel;
                                                                                                  labelWeekNumber: WeekNumberLabel;
                                                                                                  };
                                                                                                  • 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.

                                                                                                    Matchers are passed to DayPicker via DayPickerBase.disabled, and are used to determine if a day should get a Modifier.

                                                                                                    Matchers can be of different types:

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

                                                                                                    See Also

                                                                                                  type Modifier

                                                                                                  type Modifier = string;
                                                                                                  • A _modifier_ represents different styles or states of a day displayed in the calendar.

                                                                                                  type Modifiers

                                                                                                  type Modifiers = CustomModifiers & InternalModifiers;
                                                                                                  • The modifiers used by DayPicker.

                                                                                                  type ModifiersClassNames

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

                                                                                                  type ModifiersStyles

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

                                                                                                  type MonthChangeEventHandler

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

                                                                                                  type MonthsProps

                                                                                                  type MonthsProps = {
                                                                                                  children: ReactNode;
                                                                                                  };
                                                                                                  • The props for the Months component.

                                                                                                  type NavButtonLabel = (
                                                                                                  month?: Date,
                                                                                                  options?: {
                                                                                                  locale?: Locale;
                                                                                                  }
                                                                                                  ) => string;
                                                                                                  • Return the ARIA label for the "next month" / "prev month" buttons in the navigation.

                                                                                                  type SelectMultipleEventHandler

                                                                                                  type SelectMultipleEventHandler = (
                                                                                                  /** The selected days */
                                                                                                  days: Date[] | undefined,
                                                                                                  /** The day that was clicked triggering the event. */
                                                                                                  selectedDay: Date,
                                                                                                  /** The day that was clicked */
                                                                                                  activeModifiers: ActiveModifiers,
                                                                                                  /** The mouse event that triggered this event. */
                                                                                                  e: MouseEvent
                                                                                                  ) => void;
                                                                                                  • The event handler when selecting multiple days.

                                                                                                  type SelectMultipleModifiers

                                                                                                  type SelectMultipleModifiers = Pick<Modifiers, InternalModifier.Disabled>;
                                                                                                  • Represent the modifiers that are changed by the multiple selection.

                                                                                                  type SelectMultipleProviderProps

                                                                                                  type SelectMultipleProviderProps = {
                                                                                                  initialProps: DayPickerBase;
                                                                                                  children?: ReactNode;
                                                                                                  };

                                                                                                    type SelectRangeEventHandler

                                                                                                    type SelectRangeEventHandler = (
                                                                                                    /** The current range of the selected days. */
                                                                                                    range: DateRange | undefined,
                                                                                                    /** The day that was selected (or clicked) triggering the event. */
                                                                                                    selectedDay: Date,
                                                                                                    /** The modifiers of the selected day. */
                                                                                                    activeModifiers: ActiveModifiers,
                                                                                                    e: MouseEvent
                                                                                                    ) => void;
                                                                                                    • The event handler when selecting a range of days.

                                                                                                    type SelectRangeModifiers

                                                                                                    type SelectRangeModifiers = Pick<
                                                                                                    Modifiers,
                                                                                                    | InternalModifier.Disabled
                                                                                                    | InternalModifier.RangeEnd
                                                                                                    | InternalModifier.RangeMiddle
                                                                                                    | InternalModifier.RangeStart
                                                                                                    >;
                                                                                                    • Represent the modifiers that are changed by the range selection.

                                                                                                    type SelectSingleEventHandler

                                                                                                    type SelectSingleEventHandler = (
                                                                                                    /** The selected day, `undefined` when `required={false}` (default) and the day is clicked again. */
                                                                                                    day: Date | undefined,
                                                                                                    /** The day that was selected (or clicked) triggering the event. */
                                                                                                    selectedDay: Date,
                                                                                                    /** The modifiers of the selected day. */
                                                                                                    activeModifiers: ActiveModifiers,
                                                                                                    e: MouseEvent
                                                                                                    ) => void;
                                                                                                    • The event handler when selecting a single day.

                                                                                                    type StyledComponent

                                                                                                    type StyledComponent = {
                                                                                                    className?: string;
                                                                                                    style?: CSSProperties;
                                                                                                    children?: ReactNode;
                                                                                                    };
                                                                                                    • Props of a component that can be styled via classNames or inline-styles.

                                                                                                    type StyledElement

                                                                                                    type StyledElement<T = string | CSSProperties> = {
                                                                                                    /** The root element. */
                                                                                                    readonly root: T;
                                                                                                    /** The root element when `numberOfMonths > 1`. */
                                                                                                    readonly multiple_months: T;
                                                                                                    /** The root element when `showWeekNumber={true}`. */
                                                                                                    readonly with_weeknumber: T;
                                                                                                    /** The style of an element visually hidden. */
                                                                                                    readonly vhidden: T;
                                                                                                    /** The style for resetting the buttons. */
                                                                                                    readonly button_reset: T;
                                                                                                    /** The buttons. */
                                                                                                    readonly button: T;
                                                                                                    /** The caption (showing the calendar heading and the navigation) */
                                                                                                    readonly caption: T;
                                                                                                    /** The caption when at the start of a series of months. */
                                                                                                    readonly caption_start: T;
                                                                                                    /** The caption when at the end of a series of months. */
                                                                                                    readonly caption_end: T;
                                                                                                    /** The caption when between two months (when `multipleMonths > 2`). */
                                                                                                    readonly caption_between: T;
                                                                                                    /** The caption label. */
                                                                                                    readonly caption_label: T;
                                                                                                    /** The drop-downs container. */
                                                                                                    readonly caption_dropdowns: T;
                                                                                                    /** The drop-down (select) element. */
                                                                                                    readonly dropdown: T;
                                                                                                    /** The drop-down to change the month. */
                                                                                                    readonly dropdown_month: T;
                                                                                                    /** The drop-down to change the year. */
                                                                                                    readonly dropdown_year: T;
                                                                                                    /** The drop-down icon. */
                                                                                                    readonly dropdown_icon: T;
                                                                                                    /** The months wrapper. */
                                                                                                    readonly months: T;
                                                                                                    /** The table wrapper. */
                                                                                                    readonly month: T;
                                                                                                    /** Table containing the monthly calendar. */
                                                                                                    readonly table: T;
                                                                                                    /** The table body. */
                                                                                                    readonly tbody: T;
                                                                                                    /** The table footer. */
                                                                                                    readonly tfoot: T;
                                                                                                    /** The table’s head. */
                                                                                                    readonly head: T;
                                                                                                    /** The row in the head. */
                                                                                                    readonly head_row: T;
                                                                                                    /** The head cell. */
                                                                                                    readonly head_cell: T;
                                                                                                    /** The navigation container. */
                                                                                                    readonly nav: T;
                                                                                                    /** The navigation button. */
                                                                                                    readonly nav_button: T;
                                                                                                    /** The "previous month" navigation button. */
                                                                                                    readonly nav_button_previous: T;
                                                                                                    /** The "next month" navigation button. */
                                                                                                    readonly nav_button_next: T;
                                                                                                    /** The icon for the navigation button. */
                                                                                                    readonly nav_icon: T;
                                                                                                    /** The table’s row. */
                                                                                                    readonly row: T;
                                                                                                    /** The weeknumber displayed in the column. */
                                                                                                    readonly weeknumber: T;
                                                                                                    /** The table cell containing the day element. */
                                                                                                    readonly cell: T;
                                                                                                    /** The day element: it is a `span` when not interactive, a `button` otherwise. */
                                                                                                    readonly day: T;
                                                                                                    /** The day when outside the month. */
                                                                                                    readonly day_outside: T;
                                                                                                    /** The day when selected. */
                                                                                                    readonly day_selected: T;
                                                                                                    /** The day when disabled. */
                                                                                                    readonly day_disabled: T;
                                                                                                    /** The day when hidden. */
                                                                                                    readonly day_hidden: T;
                                                                                                    /** The day when at the start of a selected range. */
                                                                                                    readonly day_range_start: T;
                                                                                                    /** The day when at the end of a selected range. */
                                                                                                    readonly day_range_end: T;
                                                                                                    /** The day in the middle of a selected range: it does not include the "from" and the "to" days. */
                                                                                                    readonly day_range_middle: T;
                                                                                                    /** The day when today. */
                                                                                                    readonly day_today: T;
                                                                                                    };
                                                                                                    • The style (either via class names or via in-line styles) of an element.

                                                                                                    type Styles

                                                                                                    type Styles = Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>;
                                                                                                    • The inline-styles of each styled element, to use with the styles prop. Day modifiers, such as today or hidden, should be styled using the modifiersStyles prop.

                                                                                                    type WeekdayLabel

                                                                                                    type WeekdayLabel = (
                                                                                                    day: Date,
                                                                                                    options?: {
                                                                                                    locale?: Locale;
                                                                                                    }
                                                                                                    ) => string;
                                                                                                    • Return the ARIA label for the Head component.

                                                                                                    type WeekNumberClickEventHandler

                                                                                                    type WeekNumberClickEventHandler = (
                                                                                                    /** The week number that has been clicked. */
                                                                                                    weekNumber: number,
                                                                                                    /** The dates in the clicked week. */
                                                                                                    dates: Date[],
                                                                                                    /** The mouse event that triggered this event. */
                                                                                                    e: MouseEvent
                                                                                                    ) => void;
                                                                                                    • The event handler when the week number is clicked.

                                                                                                    type WeekNumberFormatter

                                                                                                    type WeekNumberFormatter = (
                                                                                                    weekNumber: number,
                                                                                                    options?: {
                                                                                                    locale?: Locale;
                                                                                                    }
                                                                                                    ) => ReactNode;
                                                                                                    • Represent a function to format the week number.

                                                                                                    type WeekNumberLabel

                                                                                                    type WeekNumberLabel = (
                                                                                                    n: number,
                                                                                                    options?: {
                                                                                                    locale?: Locale;
                                                                                                    }
                                                                                                    ) => string;
                                                                                                    • Return the ARIA label of the week number.

                                                                                                    Package Files (1)

                                                                                                    Dependencies (0)

                                                                                                    No dependencies.

                                                                                                    Dev Dependencies (45)

                                                                                                    Peer Dependencies (2)

                                                                                                    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>