();
8 |
9 | let footer = Please pick the first day.
;
10 | if (range?.from) {
11 | if (!range.to) {
12 | footer = {format(range.from, 'PPP')}
;
13 | } else if (range.to) {
14 | footer = (
15 |
16 | {format(range.from, 'PPP')}–{format(range.to, 'PPP')}
17 |
18 | );
19 | }
20 | }
21 |
22 | return (
23 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/website/test-integration/examples/container-attributes.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { freezeBeforeAll } from '@site/test/utils';
5 | import { render } from '@testing-library/react';
6 |
7 | import Example from '@examples/container-attributes';
8 |
9 | const today = new Date(2021, 10, 25);
10 | freezeBeforeAll(today);
11 |
12 | let firstChild: HTMLDivElement;
13 | beforeEach(
14 | () =>
15 | (firstChild = render().container.firstChild as HTMLDivElement)
16 | );
17 |
18 | test('should not have AXE violations', async () => {
19 | expect(await axe(firstChild)).toHaveNoViolations();
20 | });
21 |
22 | test('should have the specified id', () => {
23 | expect(firstChild.id).toBe('testId');
24 | });
25 |
26 | test('should have the DataSet attribute', () => {
27 | expect(firstChild).toHaveAttribute('data-test', 'testData');
28 | });
29 |
--------------------------------------------------------------------------------
/src/components/Months/Months.test.tsx:
--------------------------------------------------------------------------------
1 | import { customRender } from 'test/render';
2 |
3 | import { Months } from './Months';
4 |
5 | let root: HTMLElement;
6 |
7 | test('should use the default class name', () => {
8 | const view = customRender(foo, {});
9 | root = view.container.firstChild as HTMLElement;
10 | expect(root).toHaveClass('rdp-months');
11 | });
12 |
13 | test('should use a custom class name', () => {
14 | const view = customRender(foo, {
15 | classNames: { months: 'foo' }
16 | });
17 | root = view.container.firstChild as HTMLElement;
18 | expect(root).toHaveClass('foo');
19 | });
20 |
21 | test('should use a custom style', () => {
22 | const view = customRender(foo, {
23 | styles: { months: { color: 'red' } }
24 | });
25 | root = view.container.firstChild as HTMLElement;
26 | expect(root).toHaveStyle({ color: 'red' });
27 | });
28 |
--------------------------------------------------------------------------------
/src/contexts/Modifiers/utils/matcherToArray.test.ts:
--------------------------------------------------------------------------------
1 | import { matcherToArray } from 'contexts/Modifiers/utils/matcherToArray';
2 | import { Matcher } from 'types/Matchers';
3 |
4 | const matcher: Matcher = jest.fn();
5 |
6 | describe('when a Matcher is passed in', () => {
7 | test('should return an array with the Matcher', () => {
8 | expect(matcherToArray(matcher)).toStrictEqual([matcher]);
9 | });
10 | });
11 |
12 | describe('when an array of Matchers is passed in', () => {
13 | test('should return a copy of the array', () => {
14 | const value = [matcher, matcher];
15 | const result = matcherToArray(value);
16 | expect(result).toStrictEqual(value);
17 | expect(result).not.toBe(value);
18 | });
19 | });
20 |
21 | describe('when undefined is passed in', () => {
22 | test('should return an empty array', () => {
23 | expect(matcherToArray(undefined)).toStrictEqual([]);
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/website/docs/reference.md:
--------------------------------------------------------------------------------
1 | # Summary
2 |
3 | Looking for the props for [DayPicker](/api/functions/DayPicker)? See:
4 |
5 | - [DayPickerBase](/api/interfaces/DayPickerBase) - The base interface for DayPicker props, extended by:
6 | - [DayPickerDefaultProps](/api/interfaces/DayPickerDefaultProps) - when DayPicker is in the default or custom selection mode.
7 | - [DayPickerSingleProps](/api/interfaces/DayPickerSingleProps) - when DayPicker is in single selection mode.
8 | - [DayPickerMultipleProps](/api/interfaces/DayPickerMultipleProps) - when DayPicker is in multiple selection mode.
9 | - [DayPickerRangeProps](/api/interfaces/DayPickerRangeProps) - when DayPicker is in range selection mode.
10 |
11 | ## API Reference
12 |
13 | - [Functions and Components](/api/modules#functions)
14 | - [Interfaces](/api/modules#interfaces)
15 | - [Type Aliases](/api/modules#type-aliases)
16 | - [Variables](/api/modules#variables)
17 |
--------------------------------------------------------------------------------
/src/types/DayPickerSingle.ts:
--------------------------------------------------------------------------------
1 | import { DayPickerProps } from 'DayPicker';
2 |
3 | import { DayPickerContextValue } from 'contexts/DayPicker';
4 |
5 | import { DayPickerBase } from './DayPickerBase';
6 | import { SelectSingleEventHandler } from './EventHandlers';
7 |
8 | /** The props for the {@link DayPicker} component when using `mode="single"`. */
9 | export interface DayPickerSingleProps extends DayPickerBase {
10 | mode: 'single';
11 | /** The selected day. */
12 | selected?: Date | undefined;
13 | /** Event fired when a day is selected. */
14 | onSelect?: SelectSingleEventHandler;
15 | /** Make the selection required. */
16 | required?: boolean;
17 | }
18 |
19 | /** Returns true when the props are of type {@link DayPickerSingleProps}. */
20 | export function isDayPickerSingle(
21 | props: DayPickerProps | DayPickerContextValue
22 | ): props is DayPickerSingleProps {
23 | return props.mode === 'single';
24 | }
25 |
--------------------------------------------------------------------------------
/website/docs/basics/keyboard.md:
--------------------------------------------------------------------------------
1 | # Keyboard Navigation
2 |
3 | When DayPicker is focused, use the following keyboard shortcuts to navigate the calendar:
4 |
5 | - Arrow Top - move to the previous week
6 | - Arrow Right - move to the next day
7 | - Arrow Bottom - move to the next week
8 | - Arrow Left - move to the previous day
9 | - Page Up - move to the previous month
10 | - Page Down - move to the next month
11 | - Shift + Page Up - move to the previous year
12 | - Shift + Page Down - move to the next year
13 | - Home - move to the start of the week
14 | - End - move to the end of the week
15 |
16 | ## Playground
17 |
18 | Press Tab to focus DayPicker and try the keyboard shortcuts above.
19 |
20 | import { RenderExample } from '@site/src/components/RenderExample';
21 |
22 |
23 |
--------------------------------------------------------------------------------
/website/examples/custom-caption.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { format } from 'date-fns';
4 | import { CaptionProps, DayPicker, useNavigation } from 'react-day-picker';
5 |
6 | function CustomCaption(props: CaptionProps) {
7 | const { goToMonth, nextMonth, previousMonth } = useNavigation();
8 | return (
9 |
10 | {format(props.displayMonth, 'MMM yyy')}
11 |
17 |
23 |
24 | );
25 | }
26 |
27 | export default function App() {
28 | return (
29 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/hooks/useControlledValue/useControlledValue.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useState } from 'react';
2 |
3 | export type DispatchStateAction = Dispatch>;
4 |
5 | /**
6 | * Helper hook for using controlled/uncontrolled values from a component props.
7 | *
8 | * When the value is not controlled, pass `undefined` as `controlledValue` and
9 | * use the returned setter to update it.
10 | *
11 | * When the value is controlled, pass the controlled value as second
12 | * argument, which will be always returned as `value`.
13 | */
14 | export function useControlledValue(
15 | defaultValue: T,
16 | controlledValue: T | undefined
17 | ): [T, DispatchStateAction] {
18 | const [uncontrolledValue, setValue] = useState(defaultValue);
19 |
20 | const value =
21 | controlledValue === undefined ? uncontrolledValue : controlledValue;
22 |
23 | return [value, setValue] as [T, DispatchStateAction];
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/IconRight/IconRight.tsx:
--------------------------------------------------------------------------------
1 | import { StyledComponent } from 'types/Styles';
2 |
3 | /**
4 | * Render the "next month" button in the navigation.
5 | */
6 | export function IconRight(props: StyledComponent): JSX.Element {
7 | return (
8 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/website/test-integration/examples/numbering-system.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { freezeBeforeAll } from '@site/test/utils';
5 | import { render, screen } from '@testing-library/react';
6 |
7 | import Example from '@examples/numbering-system';
8 |
9 | const today = new Date(2021, 10, 25);
10 | freezeBeforeAll(today);
11 |
12 | let container: HTMLElement;
13 | beforeEach(() => (container = render().container));
14 |
15 | test('should not have AXE violations', async () => {
16 | expect(await axe(container)).toHaveNoViolations();
17 | });
18 | test('should localize the year', () => {
19 | expect(screen.getByText('نوفمبر ٢٬٠٢١')).toBeInTheDocument();
20 | });
21 | test('should localize the days', () => {
22 | expect(screen.getByText('أحد')).toBeInTheDocument();
23 | });
24 | test('should localize the week numbers', () => {
25 | expect(screen.getByText('٤٥')).toBeInTheDocument();
26 | });
27 |
--------------------------------------------------------------------------------
/website/static/images/sublist-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/Day/Day.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 |
3 | import { useDayRender } from 'hooks/useDayRender';
4 |
5 | import { Button } from '../Button';
6 |
7 | /** Represent the props used by the {@link Day} component. */
8 | export interface DayProps {
9 | /** The month where the date is displayed. */
10 | displayMonth: Date;
11 | /** The date to render. */
12 | date: Date;
13 | }
14 |
15 | /**
16 | * The content of a day cell – as a button or span element according to its
17 | * modifiers.
18 | */
19 | export function Day(props: DayProps): JSX.Element {
20 | const buttonRef = useRef(null);
21 | const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
22 |
23 | if (dayRender.isHidden) {
24 | return ;
25 | }
26 | if (!dayRender.isButton) {
27 | return ;
28 | }
29 | return ;
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/IconLeft/IconLeft.tsx:
--------------------------------------------------------------------------------
1 | import { StyledComponent } from 'types/Styles';
2 |
3 | /**
4 | * Render the "previous month" button in the navigation.
5 | */
6 | export function IconLeft(props: StyledComponent): JSX.Element {
7 | return (
8 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/website/examples/numbering-system.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { format } from 'date-fns';
4 | import { arSA } from 'date-fns/locale';
5 | import {
6 | DateFormatter,
7 | DayPicker,
8 | WeekNumberFormatter
9 | } from 'react-day-picker';
10 |
11 | const NU_LOCALE = 'ar-u-nu-arab';
12 |
13 | const formatDay: DateFormatter = (day) =>
14 | day.getDate().toLocaleString(NU_LOCALE);
15 |
16 | const formatWeekNumber: WeekNumberFormatter = (weekNumber) => {
17 | return weekNumber.toLocaleString(NU_LOCALE);
18 | };
19 |
20 | const formatCaption: DateFormatter = (date, options) => {
21 | const y = date.getFullYear().toLocaleString(NU_LOCALE);
22 | const m = format(date, 'LLLL', { locale: options?.locale });
23 | return `${m} ${y}`;
24 | };
25 |
26 | export default function App() {
27 | return (
28 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/website/test-integration/examples/modifiers-custom.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { user } from '@site/test/user';
4 | import { act, render } from '@testing-library/react';
5 |
6 | import { getDayButton, getTableFooter } from 'react-day-picker/test/selectors';
7 |
8 | import Example from '@examples/modifiers-custom';
9 |
10 | const bookedDays = [new Date(2021, 5, 8), new Date(2021, 5, 9)];
11 | const bookedStyle = {
12 | border: '2px solid currentColor'
13 | };
14 | beforeEach(() => {
15 | render();
16 | });
17 |
18 | test.each(bookedDays)('%s should have the booked style', (day) => {
19 | expect(getDayButton(day)).toHaveStyle(bookedStyle);
20 | });
21 |
22 | describe('when the booked day is clicked', () => {
23 | beforeEach(async () => {
24 | await act(() => user.click(getDayButton(bookedDays[1])));
25 | });
26 | test('the footer should be updated', () => {
27 | expect(getTableFooter()).toHaveTextContent('This day is already booked!');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/src/contexts/Navigation/useNavigationState.ts:
--------------------------------------------------------------------------------
1 | import { startOfMonth } from 'date-fns';
2 |
3 | import { useDayPicker } from 'contexts/DayPicker';
4 | import { useControlledValue } from 'hooks/useControlledValue';
5 |
6 | import { getInitialMonth } from './utils/getInitialMonth';
7 |
8 | export type NavigationState = [
9 | /** The month DayPicker is navigating at */
10 | month: Date,
11 | /** Go to the specified month. */
12 | goToMonth: (month: Date) => void
13 | ];
14 |
15 | /** Controls the navigation state. */
16 | export function useNavigationState(): NavigationState {
17 | const context = useDayPicker();
18 | const initialMonth = getInitialMonth(context);
19 | const [month, setMonth] = useControlledValue(initialMonth, context.month);
20 |
21 | const goToMonth = (date: Date) => {
22 | if (context.disableNavigation) return;
23 | const month = startOfMonth(date);
24 | setMonth(month);
25 | context.onMonthChange?.(month);
26 | };
27 |
28 | return [month, goToMonth];
29 | }
30 |
--------------------------------------------------------------------------------
/src/contexts/Navigation/utils/getInitialMonth.ts:
--------------------------------------------------------------------------------
1 | import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
2 |
3 | import { DayPickerContextValue } from 'contexts/DayPicker';
4 |
5 | /** Return the initial month according to the given options. */
6 | export function getInitialMonth(context: Partial): Date {
7 | const { month, defaultMonth, today } = context;
8 | let initialMonth = month || defaultMonth || today || new Date();
9 |
10 | const { toDate, fromDate, numberOfMonths = 1 } = context;
11 |
12 | // Fix the initialMonth if is after the to-date
13 | if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
14 | const offset = -1 * (numberOfMonths - 1);
15 | initialMonth = addMonths(toDate, offset);
16 | }
17 | // Fix the initialMonth if is before the from-date
18 | if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
19 | initialMonth = fromDate;
20 | }
21 | return startOfMonth(initialMonth);
22 | }
23 |
--------------------------------------------------------------------------------
/src/hooks/useActiveModifiers/useActiveModifiers.test.tsx:
--------------------------------------------------------------------------------
1 | import { addMonths } from 'date-fns';
2 |
3 | import { renderDayPickerHook } from 'test/render';
4 |
5 | import { ActiveModifiers } from 'types/Modifiers';
6 |
7 | import { useActiveModifiers } from './useActiveModifiers';
8 |
9 | const date = new Date(2010, 5, 23);
10 |
11 | describe('when in the same month', () => {
12 | const displayMonth = date;
13 | test('should return the active modifiers', () => {
14 | const result = renderDayPickerHook(() =>
15 | useActiveModifiers(date, displayMonth)
16 | );
17 | expect(result).toBeDefined();
18 | });
19 | });
20 |
21 | describe('when not in the same display month', () => {
22 | const displayMonth = addMonths(date, 1);
23 | test('should return the outside modifier', () => {
24 | const result = renderDayPickerHook(() =>
25 | useActiveModifiers(date, displayMonth)
26 | );
27 | expect(result.current.outside).toBe(true);
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/website/src/theme/CodeBlock/sandpack-app/light.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 1em;
3 | font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell,
4 | 'Noto Sans', sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
5 | sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
6 | -webkit-font-smoothing: antialiased;
7 | -moz-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: antialiased;
9 | text-rendering: optimizeLegibility;
10 | -webkit-tap-highlight-color: transparent;
11 | -webkit-touch-callout: none;
12 | background-color: white;
13 | }
14 |
15 | .dialog-sheet {
16 | background: white;
17 | border-radius: 4px;
18 | box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.04), 0px 4px 5px rgba(0, 0, 0, 0.06),
19 | 0px 2px 4px -1px rgba(0, 0, 0, 0.09);
20 | }
21 | input {
22 | font-size: 1em;
23 | padding: 0.4em 0.6em;
24 | }
25 | button {
26 | font-size: 1em;
27 | padding: 0.4em 0.6em;
28 | }
29 |
30 | input + button {
31 | margin-left: 0.5em;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/CaptionLabel/CaptionLabel.test.tsx:
--------------------------------------------------------------------------------
1 | import { customRender } from 'test/render';
2 | import { getMonthCaption } from 'test/selectors';
3 | import { freezeBeforeAll } from 'test/utils';
4 |
5 | import { CaptionLabel } from './CaptionLabel';
6 |
7 | const today = new Date(1979, 8);
8 | freezeBeforeAll(today);
9 |
10 | test('should render the formatted display month', () => {
11 | customRender();
12 | expect(getMonthCaption()).toHaveTextContent('September 1979');
13 | });
14 |
15 | test('should apply the `caption_label` class name', () => {
16 | customRender(, {
17 | classNames: { caption_label: 'foo' }
18 | });
19 | expect(getMonthCaption()).toHaveClass('foo');
20 | });
21 |
22 | test('should apply the `caption_label` style', () => {
23 | customRender(, {
24 | styles: { caption_label: { color: 'red' } }
25 | });
26 | expect(getMonthCaption()).toHaveStyle({ color: 'red' });
27 | });
28 |
--------------------------------------------------------------------------------
/website/examples/range.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { addDays, format } from 'date-fns';
4 | import { DateRange, DayPicker } from 'react-day-picker';
5 |
6 | const pastMonth = new Date(2020, 10, 15);
7 |
8 | export default function App() {
9 | const defaultSelected: DateRange = {
10 | from: pastMonth,
11 | to: addDays(pastMonth, 4)
12 | };
13 | const [range, setRange] = useState(defaultSelected);
14 |
15 | let footer = Please pick the first day.
;
16 | if (range?.from) {
17 | if (!range.to) {
18 | footer = {format(range.from, 'PPP')}
;
19 | } else if (range.to) {
20 | footer = (
21 |
22 | {format(range.from, 'PPP')}–{format(range.to, 'PPP')}
23 |
24 | );
25 | }
26 | }
27 |
28 | return (
29 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/contexts/DayPicker/utils/parseFromToProps.ts:
--------------------------------------------------------------------------------
1 | import { endOfMonth, startOfDay, startOfMonth } from 'date-fns';
2 |
3 | import { DayPickerBase } from 'types/DayPickerBase';
4 |
5 | /** Return the `fromDate` and `toDate` prop values values parsing the DayPicker props. */
6 | export function parseFromToProps(
7 | props: Pick<
8 | DayPickerBase,
9 | 'fromYear' | 'toYear' | 'fromDate' | 'toDate' | 'fromMonth' | 'toMonth'
10 | >
11 | ): { fromDate: Date | undefined; toDate: Date | undefined } {
12 | const { fromYear, toYear, fromMonth, toMonth } = props;
13 | let { fromDate, toDate } = props;
14 |
15 | if (fromMonth) {
16 | fromDate = startOfMonth(fromMonth);
17 | } else if (fromYear) {
18 | fromDate = new Date(fromYear, 0, 1);
19 | }
20 | if (toMonth) {
21 | toDate = endOfMonth(toMonth);
22 | } else if (toYear) {
23 | toDate = new Date(toYear, 11, 31);
24 | }
25 |
26 | return {
27 | fromDate: fromDate ? startOfDay(fromDate) : undefined,
28 | toDate: toDate ? startOfDay(toDate) : undefined
29 | };
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react';
2 |
3 | import { useDayPicker } from 'contexts/DayPicker';
4 |
5 | /** The props for the {@link Button} component. */
6 | export type ButtonProps = JSX.IntrinsicElements['button'];
7 |
8 | /** Render a button HTML element applying the reset class name. */
9 | export const Button = forwardRef(
10 | (props, ref) => {
11 | const { classNames, styles } = useDayPicker();
12 |
13 | const classNamesArr = [classNames.button_reset, classNames.button];
14 | if (props.className) {
15 | classNamesArr.push(props.className);
16 | }
17 | const className = classNamesArr.join(' ');
18 |
19 | const style = { ...styles.button_reset, ...styles.button };
20 | if (props.style) {
21 | Object.assign(style, props.style);
22 | }
23 |
24 | return (
25 |
32 | );
33 | }
34 | );
35 |
--------------------------------------------------------------------------------
/src/types/DayPickerMultiple.ts:
--------------------------------------------------------------------------------
1 | import { DayPickerProps } from 'DayPicker';
2 |
3 | import { DayPickerContextValue } from 'contexts/DayPicker';
4 |
5 | import { DayPickerBase } from './DayPickerBase';
6 | import { SelectMultipleEventHandler } from './EventHandlers';
7 |
8 | /** The props for the {@link DayPicker} component when using `mode="multiple"`. */
9 | export interface DayPickerMultipleProps extends DayPickerBase {
10 | mode: 'multiple';
11 | /** The selected days. */
12 | selected?: Date[] | undefined;
13 | /** Event fired when a days added or removed to the selection. */
14 | onSelect?: SelectMultipleEventHandler;
15 | /** The minimum amount of days that can be selected. */
16 | min?: number;
17 | /** The maximum amount of days that can be selected. */
18 | max?: number;
19 | }
20 |
21 | /** Returns true when the props are of type {@link DayPickerMultipleProps}. */
22 | export function isDayPickerMultiple(
23 | props: DayPickerProps | DayPickerContextValue
24 | ): props is DayPickerMultipleProps {
25 | return props.mode === 'multiple';
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/IconDropdown/IconDropdown.tsx:
--------------------------------------------------------------------------------
1 | import { StyledComponent } from 'types/Styles';
2 |
3 | /**
4 | * Render the icon in the styled drop-down.
5 | */
6 | export function IconDropdown(props: StyledComponent): JSX.Element {
7 | return (
8 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/types/DayPickerRange.ts:
--------------------------------------------------------------------------------
1 | import { DayPickerProps } from 'DayPicker';
2 |
3 | import { DayPickerContextValue } from 'contexts/DayPicker';
4 |
5 | import { DayPickerBase } from './DayPickerBase';
6 | import { SelectRangeEventHandler } from './EventHandlers';
7 | import { DateRange } from './Matchers';
8 |
9 | /** The props for the {@link DayPicker} component when using `mode="range"`. */
10 | export interface DayPickerRangeProps extends DayPickerBase {
11 | mode: 'range';
12 | /** The selected range of days. */
13 | selected?: DateRange | undefined;
14 | /** Event fired when a range (or a part of the range) is selected. */
15 | onSelect?: SelectRangeEventHandler;
16 | /** The minimum amount of days that can be selected. */
17 | min?: number;
18 | /** The maximum amount of days that can be selected. */
19 | max?: number;
20 | }
21 |
22 | /** Returns true when the props are of type {@link DayPickerRangeProps}. */
23 | export function isDayPickerRange(
24 | props: DayPickerProps | DayPickerContextValue
25 | ): props is DayPickerRangeProps {
26 | return props.mode === 'range';
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/DayContent/DayContent.test.tsx:
--------------------------------------------------------------------------------
1 | import { es } from 'date-fns/locale';
2 | import { DayPickerProps } from 'DayPicker';
3 |
4 | import { customRender } from 'test/render';
5 | import { freezeBeforeAll } from 'test/utils';
6 |
7 | import { DayContent, DayContentProps } from 'components/DayContent';
8 |
9 | const today = new Date(2021, 8);
10 |
11 | freezeBeforeAll(today);
12 | let container: HTMLElement;
13 | function setup(props: DayContentProps, dayPickerProps?: DayPickerProps) {
14 | const view = customRender(, dayPickerProps);
15 | container = view.container;
16 | }
17 |
18 | const date = today;
19 | const displayMonth = today;
20 | const props: DayContentProps = {
21 | date: date,
22 | displayMonth,
23 | activeModifiers: {}
24 | };
25 |
26 | const dayPickerProps: DayPickerProps = {
27 | locale: es
28 | };
29 |
30 | describe('when rendered', () => {
31 | beforeEach(() => {
32 | setup(props, dayPickerProps);
33 | });
34 | test('contains the formatted day', () => {
35 | expect(container.firstChild).toHaveTextContent('1');
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/website/docusaurus.sidebars.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | // @ts-check
3 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
4 | const sidebars = {
5 | docsSidebar: [
6 | 'index',
7 | 'start',
8 | {
9 | 'DayPicker Basics': [
10 | 'basics/navigation',
11 | 'basics/customization',
12 | 'basics/selecting-days',
13 | 'basics/modifiers',
14 | 'basics/styling',
15 | 'basics/localization',
16 | 'basics/keyboard'
17 | ]
18 | },
19 | {
20 | Guides: [
21 | 'guides/formatters',
22 | 'guides/custom-components',
23 | 'guides/input-fields',
24 | 'guides/upgrading'
25 | ]
26 | }
27 | ],
28 | developmentSidebar: [
29 | 'development/index',
30 | 'development/source',
31 | 'development/docs',
32 | 'development/code-of-conduct',
33 | 'changelog',
34 | 'license'
35 | ],
36 | apiSidebar: [
37 | 'reference',
38 | {
39 | type: 'autogenerated',
40 | dirName: 'api'
41 | }
42 | ]
43 | };
44 |
45 | module.exports = sidebars;
46 |
--------------------------------------------------------------------------------
/website/examples/formatters.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { format } from 'date-fns';
4 | import { DateFormatter, DayPicker } from 'react-day-picker';
5 |
6 | const seasonEmoji: Record = {
7 | winter: '⛄️',
8 | spring: '🌸',
9 | summer: '🌻',
10 | autumn: '🍂'
11 | };
12 |
13 | const getSeason = (month: Date): string => {
14 | const monthNumber = month.getMonth();
15 | if (monthNumber >= 0 && monthNumber < 3) return 'winter';
16 | if (monthNumber >= 3 && monthNumber < 6) return 'spring';
17 | if (monthNumber >= 6 && monthNumber < 9) return 'summer';
18 | else return 'autumn';
19 | };
20 |
21 | const formatCaption: DateFormatter = (month, options) => {
22 | const season = getSeason(month);
23 | return (
24 | <>
25 |
26 | {seasonEmoji[season]}
27 | {' '}
28 | {format(month, 'LLLL', { locale: options?.locale })}
29 |
30 | );
31 | };
32 |
33 | export default function App() {
34 | return (
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to DayPicker
2 |
3 | You are welcome to join the [DayPicker
4 | contributors](https://github.com/gpbl/react-day-picker/graphs/contributors),
5 | help us building the best date picker for React.
6 |
7 | There are many ways to help the development of DayPicker:
8 |
9 | - Improve our build tools and Github actions
10 | - Opening PRs with new features, bug fixes and improved rendering performance
11 | - Align the source code to the latest Typescript / React practices
12 | - Helping with unit and integration tests
13 | - Proofreading [our website](https://react-day-picker.js.org/) and the
14 | code documentation in the source files
15 | - Making the website more stylish
16 | - Help maintaining [the repository](https://github.com/gpbl/react-day-picker) on Github and triaging issues and PRs
17 | - Answering our [support questions](https://github.com/gpbl/react-day-picker/discussions/categories/support)
18 | - [Sponsoring the project](https://github.com/sponsors/gpbl)
19 |
20 | [Send a
21 | message](https://github.com/gpbl/react-day-picker/discussions)
22 | in our discussions page to present yourself!
23 |
--------------------------------------------------------------------------------
/src/contexts/Modifiers/utils/getActiveModifiers.ts:
--------------------------------------------------------------------------------
1 | import { isSameMonth } from 'date-fns';
2 |
3 | import { ActiveModifiers, Modifiers } from 'types/Modifiers';
4 |
5 | import { isMatch } from './isMatch';
6 |
7 | /** Return the active modifiers for the given day. */
8 | export function getActiveModifiers(
9 | day: Date,
10 | /** The modifiers to match for the given date. */
11 | modifiers: Modifiers,
12 | /** The month where the day is displayed, to add the "outside" modifiers. */
13 | displayMonth?: Date
14 | ): ActiveModifiers {
15 | const matchedModifiers = Object.keys(modifiers).reduce(
16 | (result: string[], key: string): string[] => {
17 | const modifier = modifiers[key];
18 | if (isMatch(day, modifier)) {
19 | result.push(key);
20 | }
21 | return result;
22 | },
23 | []
24 | );
25 | const activeModifiers: ActiveModifiers = {};
26 | matchedModifiers.forEach((modifier) => (activeModifiers[modifier] = true));
27 |
28 | if (displayMonth && !isSameMonth(day, displayMonth)) {
29 | activeModifiers.outside = true;
30 | }
31 |
32 | return activeModifiers;
33 | }
34 |
--------------------------------------------------------------------------------
/website/examples/styling-modifiers.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { DayPicker } from 'react-day-picker';
4 |
5 | const css = `
6 | .my-selected:not([disabled]) {
7 | font-weight: bold;
8 | border: 2px solid currentColor;
9 | }
10 | .my-selected:hover:not([disabled]) {
11 | border-color: blue;
12 | color: blue;
13 | }
14 | .my-today {
15 | font-weight: bold;
16 | font-size: 140%;
17 | color: red;
18 | }
19 | `;
20 |
21 | export default function App() {
22 | const [selectedDay, setSelectedDay] = useState();
23 | return (
24 | <>
25 |
26 |
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/src/style.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | 'rdp': string
3 | 'rdp-vhidden': string
4 | 'rdp-button_reset': string
5 | 'rdp-button': string
6 | 'rdp-day_selected': string
7 | 'rdp-months': string
8 | 'rdp-month': string
9 | 'rdp-table': string
10 | 'rdp-with_weeknumber': string
11 | 'rdp-caption': string
12 | 'rdp-multiple_months': string
13 | 'rdp-caption_dropdowns': string
14 | 'rdp-caption_label': string
15 | 'rdp-nav': string
16 | 'rdp-caption_start': string
17 | 'rdp-caption_end': string
18 | 'rdp-nav_button': string
19 | 'rdp-dropdown_year': string
20 | 'rdp-dropdown_month': string
21 | 'rdp-dropdown': string
22 | 'rdp-dropdown_icon': string
23 | 'rdp-head': string
24 | 'rdp-head_row': string
25 | 'rdp-row': string
26 | 'rdp-head_cell': string
27 | 'rdp-tbody': string
28 | 'rdp-tfoot': string
29 | 'rdp-cell': string
30 | 'rdp-weeknumber': string
31 | 'rdp-day': string
32 | 'rdp-day_today': string
33 | 'rdp-day_outside': string
34 | 'rdp-day_range_start': string
35 | 'rdp-day_range_end': string
36 | 'rdp-day_range_middle': string
37 | }
38 |
39 | export default styles
40 |
--------------------------------------------------------------------------------
/website/src/pages/render.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | import React from 'react';
3 |
4 | import BrowserOnly from '@docusaurus/BrowserOnly';
5 | import { useLocation } from '@docusaurus/router';
6 | import Layout from '@theme/Layout/Provider';
7 |
8 | import { RenderExample } from '../components/RenderExample';
9 |
10 | /**
11 | * Create a page at `/render` URL that renders the examples from the examples
12 | * `directory`.
13 | */
14 | export default function Render(): JSX.Element {
15 | const location = useLocation();
16 | return (
17 |
18 |
19 | {() => {
20 | const name = new URLSearchParams(location.search).get('example');
21 | return (
22 |
31 | );
32 | }}
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/CaptionLabel/CaptionLabel.tsx:
--------------------------------------------------------------------------------
1 | import { useDayPicker } from 'contexts/DayPicker';
2 |
3 | /** The props for the {@link CaptionLabel} component. */
4 | export interface CaptionLabelProps {
5 | /** The ID for the heading element. Must be the same as the labelled-by in Table. */
6 | id?: string;
7 | /** The month where the caption is displayed. */
8 | displayMonth: Date;
9 | /** The index of the month where the caption is displayed. Older custom components may miss this prop. */
10 | displayIndex?: number | undefined;
11 | }
12 |
13 | /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
14 | export function CaptionLabel(props: CaptionLabelProps): JSX.Element {
15 | const {
16 | locale,
17 | classNames,
18 | styles,
19 | formatters: { formatCaption }
20 | } = useDayPicker();
21 | return (
22 |
29 | {formatCaption(props.displayMonth, { locale })}
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/types/Formatters.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { Locale } from 'date-fns';
4 |
5 | /** Represents a function to format a date. */
6 | export type DateFormatter = (
7 | date: Date,
8 | options?: {
9 | locale?: Locale;
10 | }
11 | ) => ReactNode;
12 |
13 | /** Represent a map of formatters used to render localized content. */
14 | export type Formatters = {
15 | /** Format the month in the caption when `captionLayout` is `buttons`. */
16 | formatCaption: DateFormatter;
17 | /** Format the month in the navigation dropdown. */
18 | formatMonthCaption: DateFormatter;
19 | /** Format the year in the navigation dropdown. */
20 | formatYearCaption: DateFormatter;
21 | /** Format the day in the day cell. */
22 | formatDay: DateFormatter;
23 | /** Format the week number. */
24 | formatWeekNumber: WeekNumberFormatter;
25 | /** Format the week day name in the header */
26 | formatWeekdayName: DateFormatter;
27 | };
28 |
29 | /** Represent a function to format the week number. */
30 | export type WeekNumberFormatter = (
31 | weekNumber: number,
32 | options?: {
33 | locale?: Locale;
34 | }
35 | ) => ReactNode;
36 |
--------------------------------------------------------------------------------
/src/components/HeadRow/HeadRow.tsx:
--------------------------------------------------------------------------------
1 | import { useDayPicker } from 'contexts/DayPicker';
2 |
3 | import { getWeekdays } from './utils';
4 |
5 | /**
6 | * Render the HeadRow component - i.e. the table head row with the weekday names.
7 | */
8 | export function HeadRow(): JSX.Element {
9 | const {
10 | classNames,
11 | styles,
12 | showWeekNumber,
13 | locale,
14 | weekStartsOn,
15 | ISOWeek,
16 | formatters: { formatWeekdayName },
17 | labels: { labelWeekday }
18 | } = useDayPicker();
19 |
20 | const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
21 |
22 | return (
23 |
24 | {showWeekNumber && (
25 | |
26 | )}
27 | {weekdays.map((weekday, i) => (
28 |
35 | {formatWeekdayName(weekday, { locale })}
36 | |
37 | ))}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014-2024 Giampaolo Bellavite and contributors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/website/test-integration/examples/weeknumber.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import { getTableFooter, getWeekButton } from 'react-day-picker/test/selectors';
9 |
10 | import Example from '@examples/weeknumber';
11 |
12 | const today = new Date(2021, 10, 25);
13 | freezeBeforeAll(today);
14 |
15 | let container: HTMLElement;
16 | beforeEach(() => (container = render().container));
17 |
18 | test('should not have AXE violations', async () => {
19 | expect(await axe(container)).toHaveNoViolations();
20 | });
21 |
22 | describe('when displaying November 2021', () => {
23 | test('should display the 45th week number', () => {
24 | expect(getWeekButton(45)).toBeInTheDocument();
25 | });
26 | describe('when the week button is clicked', () => {
27 | beforeEach(async () => act(() => user.click(getWeekButton(45))));
28 | test('should update the footer', () => {
29 | expect(getTableFooter()).toHaveTextContent('You clicked the week n. 45.');
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/website/test-integration/examples/custom-single.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { render } from '@testing-library/react';
7 | import { act } from 'react-dom/test-utils';
8 |
9 | import { getDayButton, getTableFooter } from 'react-day-picker/test/selectors';
10 |
11 | import Example from '@examples/custom-single';
12 |
13 | const today = new Date(2021, 10, 25);
14 | freezeBeforeAll(today);
15 |
16 | let container: HTMLElement;
17 | beforeEach(() => {
18 | container = render().container;
19 | });
20 |
21 | test('should not have AXE violations', async () => {
22 | expect(await axe(container)).toHaveNoViolations();
23 | });
24 |
25 | describe('when a day is clicked', () => {
26 | const day = new Date(2021, 10, 1);
27 | beforeEach(() => act(() => user.click(getDayButton(day))));
28 | test('should appear as selected', () => {
29 | expect(getDayButton(day)).toHaveAttribute('aria-selected', 'true');
30 | });
31 | test('should update the footer', () => {
32 | expect(getTableFooter()).toHaveTextContent('You selected Mon Nov 01 2021.');
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/src/contexts/SelectRange/utils/addToRange.ts:
--------------------------------------------------------------------------------
1 | import { isAfter, isBefore, isSameDay } from 'date-fns';
2 |
3 | import { DateRange } from 'types/Matchers';
4 |
5 | /**
6 | * Add a day to an existing range.
7 | *
8 | * The returned range takes in account the `undefined` values and if the added
9 | * day is already present in the range.
10 | */
11 | export function addToRange(
12 | day: Date,
13 | range?: DateRange
14 | ): DateRange | undefined {
15 | const { from, to } = range || {};
16 | if (from && to) {
17 | if (isSameDay(to, day) && isSameDay(from, day)) {
18 | return undefined;
19 | }
20 | if (isSameDay(to, day)) {
21 | return { from: to, to: undefined };
22 | }
23 | if (isSameDay(from, day)) {
24 | return undefined;
25 | }
26 | if (isAfter(from, day)) {
27 | return { from: day, to };
28 | }
29 | return { from, to: day };
30 | }
31 | if (to) {
32 | if (isAfter(day, to)) {
33 | return { from: to, to: day };
34 | }
35 | return { from: day, to };
36 | }
37 | if (from) {
38 | if (isBefore(day, from)) {
39 | return { from: day, to: from };
40 | }
41 | return { from, to: day };
42 | }
43 | return { from: day, to: undefined };
44 | }
45 |
--------------------------------------------------------------------------------
/website/examples/custom-multiple.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { isSameDay } from 'date-fns';
4 | import { DayClickEventHandler, DayPicker } from 'react-day-picker';
5 |
6 | export default function App() {
7 | const [selectedDays, setSelectedDays] = useState([]);
8 |
9 | const handleDayClick: DayClickEventHandler = (day, modifiers) => {
10 | const newSelectedDays = [...selectedDays];
11 | if (modifiers.selected) {
12 | const index = selectedDays.findIndex((selectedDay) =>
13 | isSameDay(day, selectedDay)
14 | );
15 | newSelectedDays.splice(index, 1);
16 | } else {
17 | newSelectedDays.push(day);
18 | }
19 | setSelectedDays(newSelectedDays);
20 | };
21 |
22 | const handleResetClick = () => setSelectedDays([]);
23 |
24 | let footer = Please pick one or more days.
;
25 |
26 | if (selectedDays.length > 0)
27 | footer = (
28 |
29 | You selected {selectedDays.length} days.{' '}
30 |
31 |
32 | );
33 |
34 | return (
35 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/website/test-integration/examples/controlled.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { render, screen } from '@testing-library/react';
7 | import { act } from 'react-dom/test-utils';
8 |
9 | import { getMonthCaption } from 'react-day-picker/test/selectors';
10 |
11 | import Example from '@examples/controlled';
12 |
13 | const today = new Date(2022, 5, 10);
14 |
15 | function getTodayButton() {
16 | return screen.getByRole('button', { name: 'Go to Today' });
17 | }
18 |
19 | freezeBeforeAll(today);
20 | test('should not have AXE violations', async () => {
21 | const html = render().container;
22 | expect(await axe(html)).toHaveNoViolations();
23 | });
24 |
25 | describe('when the "Go to today" button is clicked', () => {
26 | beforeEach(async () => {
27 | render();
28 | await act(() => user.click(getTodayButton()));
29 | });
30 | test('the button should be disabled', async () => {
31 | expect(getTodayButton()).toBeDisabled();
32 | });
33 | test('should display the current month', () => {
34 | expect(getMonthCaption()).toHaveTextContent('June 2022');
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/website/docusaurus.navbar.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | // @ts-check
3 | // Note: type annotations allow type checking and IDEs autocompletion
4 | /** @type {import('@docusaurus/preset-classic').ThemeConfig["navbar"]} */
5 | const navbar = {
6 | title: 'React DayPicker',
7 | logo: {
8 | alt: 'DayPicker Logo',
9 | src: 'images/logo.png'
10 | },
11 | hideOnScroll: true,
12 | items: [
13 | {
14 | to: 'start',
15 | label: 'Documentation'
16 | },
17 | {
18 | to: 'reference',
19 | label: 'API Reference'
20 | },
21 | {
22 | to: 'development',
23 | label: 'Development'
24 | },
25 | {
26 | type: 'docsVersionDropdown',
27 | position: 'right',
28 | dropdownActiveClassDisabled: true,
29 | dropdownItemsBefore: [{ to: 'changelog', label: 'Changelog' }],
30 | dropdownItemsAfter: [
31 | {
32 | href: 'https://react-day-picker-v7.netlify.app',
33 | label: 'v7.4.10 (older version)'
34 | }
35 | ]
36 | },
37 | {
38 | href: 'https://github.com/gpbl/react-day-picker',
39 | position: 'right',
40 | className: 'header-github-link',
41 | 'aria-label': 'GitHub repository'
42 | }
43 | ]
44 | };
45 |
46 | module.exports = navbar;
47 |
--------------------------------------------------------------------------------
/website/test-integration/examples/start.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import { getDayButton, getTableFooter } from 'react-day-picker/test/selectors';
9 |
10 | import Example from '@examples/start';
11 |
12 | const today = new Date(2021, 10, 25);
13 | freezeBeforeAll(today);
14 |
15 | let container: HTMLElement;
16 | beforeEach(() => (container = render().container));
17 |
18 | test('should not have AXE violations', async () => {
19 | expect(await axe(container)).toHaveNoViolations();
20 | });
21 | describe('when a day is clicked', () => {
22 | const day = new Date(2021, 10, 1);
23 | beforeEach(async () => act(() => user.click(getDayButton(day))));
24 | test('should appear as selected', () => {
25 | expect(getDayButton(day)).toHaveAttribute('aria-selected', 'true');
26 | });
27 | test('should update the footer', () => {
28 | expect(getTableFooter()).toHaveTextContent(`You picked Nov 1, 2021.`);
29 | });
30 | test('should not have AXE violations', async () => {
31 | expect(await axe(container)).toHaveNoViolations();
32 | });
33 | });
34 |
--------------------------------------------------------------------------------
/website/test-integration/examples/focus-recursive.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import {
9 | getDayButton,
10 | getFocusedElement
11 | } from 'react-day-picker/test/selectors';
12 |
13 | import Example from '@examples/focus-recursive';
14 |
15 | const today = new Date(2022, 5, 10);
16 | freezeBeforeAll(today);
17 |
18 | let container: HTMLElement;
19 |
20 | beforeEach(async () => {
21 | container = render().container;
22 | await act(() => user.tab());
23 | await act(() => user.tab());
24 | await act(() => user.tab());
25 | await act(() => user.type(getFocusedElement(), '{arrowdown}'));
26 | await act(() => user.type(getFocusedElement(), '{arrowdown}'));
27 | await act(() => user.type(getFocusedElement(), '{arrowdown}'));
28 | await act(() => user.type(getFocusedElement(), '{arrowdown}'));
29 | });
30 |
31 | test('the first selected day should have focus', () => {
32 | expect(getDayButton(new Date(2022, 5, 22))).toHaveFocus();
33 | });
34 |
35 | test('should not have AXE violations', async () => {
36 | expect(await axe(container)).toHaveNoViolations();
37 | });
38 |
--------------------------------------------------------------------------------
/src/hooks/useDayRender/utils/getDayClassNames.ts:
--------------------------------------------------------------------------------
1 | import { DayPickerContextValue } from 'contexts/DayPicker';
2 | import { ActiveModifiers, InternalModifier } from 'types/Modifiers';
3 |
4 | function isInternalModifier(modifier: string): modifier is InternalModifier {
5 | return Object.values(InternalModifier).includes(modifier as InternalModifier);
6 | }
7 |
8 | /**
9 | * Return the class names for the Day element, according to the given active
10 | * modifiers.
11 | *
12 | * Custom class names are set via `modifiersClassNames` or `classNames`,
13 | * where the first have the precedence.
14 | */
15 | export function getDayClassNames(
16 | dayPicker: Pick,
17 | activeModifiers: ActiveModifiers
18 | ) {
19 | const classNames: string[] = [dayPicker.classNames.day];
20 | Object.keys(activeModifiers).forEach((modifier) => {
21 | const customClassName = dayPicker.modifiersClassNames[modifier];
22 | if (customClassName) {
23 | classNames.push(customClassName);
24 | } else if (isInternalModifier(modifier)) {
25 | const internalClassName = dayPicker.classNames[`day_${modifier}`];
26 | if (internalClassName) {
27 | classNames.push(internalClassName);
28 | }
29 | }
30 | });
31 | return classNames;
32 | }
33 |
--------------------------------------------------------------------------------
/website/docs/license.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: License
3 | hide_title: true
4 | pagination_next: null
5 | pagination_prev: null
6 | ---
7 |
8 | The MIT License (MIT)
9 |
10 | Copyright (c) 2014-2021 gpbl and contributors
11 |
12 | Permission is hereby granted, free of charge, to any person obtaining a copy
13 | of this software and associated documentation files (the "Software"), to deal
14 | in the Software without restriction, including without limitation the rights
15 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16 | copies of the Software, and to permit persons to whom the Software is
17 | furnished to do so, subject to the following conditions:
18 |
19 | The above copyright notice and this permission notice shall be included in all
20 | copies or substantial portions of the Software.
21 |
22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28 | SOFTWARE.
29 |
--------------------------------------------------------------------------------
/website/test-integration/examples/dropdown.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import {
9 | getMonthDropdown,
10 | getMonthGrid,
11 | getYearDropdown
12 | } from 'react-day-picker/test/selectors';
13 |
14 | import Example from '@examples/dropdown';
15 |
16 | const today = new Date(2022, 5, 10);
17 | freezeBeforeAll(today);
18 |
19 | let container: HTMLElement;
20 | beforeEach(() => (container = render().container));
21 |
22 | test('should not have AXE violations', async () => {
23 | expect(await axe(container)).toHaveNoViolations();
24 | });
25 |
26 | test('should display the year dropdown', () => {
27 | expect(getYearDropdown()).toBeInTheDocument();
28 | });
29 | test('should display the month dropdown', () => {
30 | expect(getMonthDropdown()).toBeInTheDocument();
31 | });
32 |
33 | describe('when choosing a month', () => {
34 | const monthName = 'January';
35 | beforeEach(() =>
36 | act(() => user.selectOptions(getMonthDropdown(), monthName))
37 | );
38 | test('should display the month', () => {
39 | expect(getMonthGrid()).toHaveAccessibleName(`${monthName} 2022`);
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/src/hooks/useSelectedDays/useSelectedDays.ts:
--------------------------------------------------------------------------------
1 | import { useDayPicker } from 'contexts/DayPicker';
2 | import { useSelectMultiple } from 'contexts/SelectMultiple';
3 | import { useSelectRange } from 'contexts/SelectRange';
4 | import { useSelectSingle } from 'contexts/SelectSingle';
5 | import { isDayPickerMultiple } from 'types/DayPickerMultiple';
6 | import { isDayPickerRange } from 'types/DayPickerRange';
7 | import { isDayPickerSingle } from 'types/DayPickerSingle';
8 | import { DateRange } from 'types/Matchers';
9 |
10 | export type SelectedDays = Date | Date[] | DateRange | undefined;
11 |
12 | /**
13 | * Return the current selected days when DayPicker is in selection mode. Days
14 | * selected by the custom selection mode are not returned.
15 | *
16 | * This hook is meant to be used inside internal or custom components.
17 | *
18 | */
19 | export function useSelectedDays(): SelectedDays {
20 | const dayPicker = useDayPicker();
21 | const single = useSelectSingle();
22 | const multiple = useSelectMultiple();
23 | const range = useSelectRange();
24 |
25 | const selectedDays = isDayPickerSingle(dayPicker)
26 | ? single.selected
27 | : isDayPickerMultiple(dayPicker)
28 | ? multiple.selected
29 | : isDayPickerRange(dayPicker)
30 | ? range.selected
31 | : undefined;
32 |
33 | return selectedDays;
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/HeadRow/utils/getWeekdays.test.ts:
--------------------------------------------------------------------------------
1 | import { es } from 'date-fns/locale';
2 |
3 | import { freezeBeforeAll } from 'test/utils';
4 |
5 | import { getWeekdays } from './getWeekdays';
6 |
7 | const today = new Date(2022, 1, 12);
8 | const prevSunday = new Date(2022, 1, 6);
9 | const prevMonday = new Date(2022, 1, 7);
10 |
11 | freezeBeforeAll(today);
12 |
13 | let result: Date[];
14 |
15 | describe('when rendered without a locale', () => {
16 | beforeEach(() => {
17 | result = getWeekdays();
18 | });
19 | test('should return 7 days', () => {
20 | expect(result).toHaveLength(7);
21 | });
22 | test('should return Sunday as first day', () => {
23 | expect(result[0]).toEqual(prevSunday);
24 | });
25 | });
26 |
27 | describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
28 | 'when week start on %s',
29 | (weekStartsOn) => {
30 | beforeEach(() => {
31 | result = getWeekdays(es, weekStartsOn);
32 | });
33 | test('the first date should be weekStartsOn', () => {
34 | expect(result[0].getDay()).toBe(weekStartsOn);
35 | });
36 | }
37 | );
38 |
39 | describe('when using ISO week', () => {
40 | beforeEach(() => {
41 | result = getWeekdays(es, 3, true);
42 | });
43 | test('should return Monday as first day', () => {
44 | expect(result[0]).toEqual(prevMonday);
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/src/contexts/Navigation/utils/getNextMonth.ts:
--------------------------------------------------------------------------------
1 | import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
2 |
3 | /**
4 | * Returns the next month the user can navigate to according to the given
5 | * options.
6 | *
7 | * Please note that the next month is not always the next calendar month:
8 | *
9 | * - if after the `toDate` range, is undefined;
10 | * - if the navigation is paged, is the number of months displayed ahead.
11 | *
12 | */
13 | export function getNextMonth(
14 | startingMonth: Date,
15 | options: {
16 | numberOfMonths?: number;
17 | fromDate?: Date;
18 | toDate?: Date;
19 | pagedNavigation?: boolean;
20 | today?: Date;
21 | disableNavigation?: boolean;
22 | }
23 | ): Date | undefined {
24 | if (options.disableNavigation) {
25 | return undefined;
26 | }
27 | const { toDate, pagedNavigation, numberOfMonths = 1 } = options;
28 | const offset = pagedNavigation ? numberOfMonths : 1;
29 | const month = startOfMonth(startingMonth);
30 |
31 | if (!toDate) {
32 | return addMonths(month, offset);
33 | }
34 |
35 | const monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
36 |
37 | if (monthsDiff < numberOfMonths) {
38 | return undefined;
39 | }
40 |
41 | // Jump forward as the number of months when paged navigation
42 | return addMonths(month, offset);
43 | }
44 |
--------------------------------------------------------------------------------
/src/contexts/Navigation/utils/getPreviousMonth.ts:
--------------------------------------------------------------------------------
1 | import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
2 |
3 | /**
4 | * Returns the next previous the user can navigate to, according to the given
5 | * options.
6 | *
7 | * Please note that the previous month is not always the previous calendar
8 | * month:
9 | *
10 | * - if before the `fromDate` date, is `undefined`;
11 | * - if the navigation is paged, is the number of months displayed before.
12 | *
13 | */
14 | export function getPreviousMonth(
15 | startingMonth: Date,
16 | options: {
17 | numberOfMonths?: number;
18 | fromDate?: Date;
19 | toDate?: Date;
20 | pagedNavigation?: boolean;
21 | today?: Date;
22 | disableNavigation?: boolean;
23 | }
24 | ): Date | undefined {
25 | if (options.disableNavigation) {
26 | return undefined;
27 | }
28 | const { fromDate, pagedNavigation, numberOfMonths = 1 } = options;
29 | const offset = pagedNavigation ? numberOfMonths : 1;
30 | const month = startOfMonth(startingMonth);
31 | if (!fromDate) {
32 | return addMonths(month, -offset);
33 | }
34 | const monthsDiff = differenceInCalendarMonths(month, fromDate);
35 |
36 | if (monthsDiff <= 0) {
37 | return undefined;
38 | }
39 |
40 | // Jump back as the number of months when paged navigation
41 | return addMonths(month, -offset);
42 | }
43 |
--------------------------------------------------------------------------------
/test/mockedContexts.ts:
--------------------------------------------------------------------------------
1 | import {
2 | FocusContextValue,
3 | SelectMultipleContextValue,
4 | SelectRangeContextValue,
5 | SelectSingleContextValue
6 | } from 'index';
7 |
8 | const singleContext: SelectSingleContextValue = {
9 | selected: new Date(),
10 | onDayClick: jest.fn()
11 | };
12 |
13 | const multipleContext: SelectMultipleContextValue = {
14 | selected: [new Date()],
15 | modifiers: { disabled: [] },
16 | onDayClick: jest.fn()
17 | };
18 |
19 | const rangeContext: SelectRangeContextValue = {
20 | selected: undefined,
21 | modifiers: {
22 | disabled: [],
23 | range_start: [],
24 | range_end: [],
25 | range_middle: []
26 | },
27 | onDayClick: jest.fn()
28 | };
29 |
30 | const focusContext: FocusContextValue = {
31 | focus: jest.fn(),
32 | focusedDay: undefined,
33 | focusTarget: undefined,
34 | blur: jest.fn(),
35 | focusDayAfter: jest.fn(),
36 | focusDayBefore: jest.fn(),
37 | focusWeekBefore: jest.fn(),
38 | focusWeekAfter: jest.fn(),
39 | focusMonthBefore: jest.fn(),
40 | focusMonthAfter: jest.fn(),
41 | focusYearBefore: jest.fn(),
42 | focusYearAfter: jest.fn(),
43 | focusStartOfWeek: jest.fn(),
44 | focusEndOfWeek: jest.fn()
45 | };
46 |
47 | export const mockedContexts = {
48 | single: singleContext,
49 | multiple: multipleContext,
50 | range: rangeContext,
51 | focus: focusContext
52 | };
53 |
--------------------------------------------------------------------------------
/src/types/Labels.ts:
--------------------------------------------------------------------------------
1 | import { Locale } from 'date-fns';
2 |
3 | import { ActiveModifiers } from 'types/Modifiers';
4 |
5 | /** Map of functions to translate ARIA labels for the relative elements. */
6 | export type Labels = {
7 | labelMonthDropdown: () => string;
8 | labelYearDropdown: () => string;
9 | labelNext: NavButtonLabel;
10 | labelPrevious: NavButtonLabel;
11 | /** @deprecated This label is not used anymore and this function will be removed in the future. */
12 | labelDay: DayLabel;
13 | labelWeekday: WeekdayLabel;
14 | labelWeekNumber: WeekNumberLabel;
15 | };
16 |
17 | /** Return the ARIA label for the {@link Day} component. */
18 | export type DayLabel = (
19 | day: Date,
20 | activeModifiers: ActiveModifiers,
21 | options?: {
22 | locale?: Locale;
23 | }
24 | ) => string;
25 |
26 | /** Return the ARIA label for the "next month" / "prev month" buttons in the navigation.*/
27 | export type NavButtonLabel = (
28 | month?: Date,
29 | options?: {
30 | locale?: Locale;
31 | }
32 | ) => string;
33 |
34 | /** Return the ARIA label for the Head component.*/
35 | export type WeekdayLabel = (
36 | day: Date,
37 | options?: {
38 | locale?: Locale;
39 | }
40 | ) => string;
41 |
42 | /** Return the ARIA label of the week number.*/
43 | export type WeekNumberLabel = (
44 | n: number,
45 | options?: {
46 | locale?: Locale;
47 | }
48 | ) => string;
49 |
--------------------------------------------------------------------------------
/src/contexts/RootProvider.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { ModifiersProvider } from 'contexts/Modifiers/ModifiersContext';
4 |
5 | import { DayPickerProvider } from './DayPicker';
6 | import { FocusProvider } from './Focus';
7 | import { NavigationProvider } from './Navigation';
8 | import { SelectMultipleProvider } from './SelectMultiple';
9 | import { SelectRangeProvider } from './SelectRange';
10 | import { SelectSingleProvider } from './SelectSingle';
11 |
12 | /** The props of {@link RootProvider}. */
13 | export interface RootContext {
14 | children?: ReactNode;
15 | }
16 |
17 | /** Provide the value for all the context providers. */
18 | export function RootProvider(props: RootContext): JSX.Element {
19 | const { children, ...initialProps } = props;
20 |
21 | return (
22 |
23 |
24 |
25 |
26 |
27 |
28 | {children}
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/contexts/Focus/utils/getInitialFocusTarget.test.ts:
--------------------------------------------------------------------------------
1 | import { Modifiers } from 'types/Modifiers';
2 |
3 | import { getInitialFocusTarget } from './getInitialFocusTarget';
4 |
5 | describe('when no days are selected is selected', () => {
6 | test('should return the first day of month', () => {
7 | const displayMonth = new Date(2022, 7);
8 | const modifiers: Modifiers = {
9 | outside: [],
10 | disabled: [],
11 | selected: [],
12 | hidden: [],
13 | today: [],
14 | range_start: [],
15 | range_end: [],
16 | range_middle: []
17 | };
18 | const initialFocusTarget = getInitialFocusTarget([displayMonth], modifiers);
19 | expect(initialFocusTarget).toStrictEqual(displayMonth);
20 | });
21 | });
22 |
23 | describe('when a day is selected', () => {
24 | test('should return the selected day', () => {
25 | const displayMonths = [new Date(2022, 7)];
26 | const selectedDay1 = new Date(2022, 7, 17);
27 | const selectedDay2 = new Date(2022, 7, 19);
28 | const modifiers: Modifiers = {
29 | outside: [],
30 | disabled: [],
31 | selected: [selectedDay1, selectedDay2],
32 | hidden: [],
33 | today: [],
34 | range_start: [],
35 | range_end: [],
36 | range_middle: []
37 | };
38 | const initialFocusTarget = getInitialFocusTarget(displayMonths, modifiers);
39 | expect(initialFocusTarget).toStrictEqual(selectedDay1);
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/src/contexts/Modifiers/ModifiersContext.test.ts:
--------------------------------------------------------------------------------
1 | import { DayPickerProps } from 'DayPicker';
2 |
3 | import { renderDayPickerHook } from 'test/render';
4 |
5 | import { useModifiers } from 'contexts/Modifiers';
6 | import { DayModifiers, InternalModifier, Modifiers } from 'types/Modifiers';
7 |
8 | const internalModifiers = Object.values(InternalModifier);
9 |
10 | function renderHook(dayPickerProps: Partial = {}) {
11 | return renderDayPickerHook(useModifiers, dayPickerProps);
12 | }
13 |
14 | describe('when rendered with custom modifiers', () => {
15 | const modifier = new Date(2018, 11, 12);
16 | const dayModifiers: DayModifiers = {
17 | foo: modifier,
18 | today: modifier,
19 | outside: modifier,
20 | disabled: modifier,
21 | selected: modifier,
22 | hidden: modifier,
23 | range_start: modifier,
24 | range_end: modifier,
25 | range_middle: modifier
26 | };
27 | test('should return the custom modifiers', () => {
28 | const result = renderHook({ modifiers: dayModifiers });
29 | expect(result.current.foo).toEqual([dayModifiers.foo]);
30 | });
31 | test.each(internalModifiers)(
32 | 'should override the %s internal modifier',
33 | (internalModifier) => {
34 | const result = renderHook({ modifiers: dayModifiers });
35 | expect(result.current[internalModifier]).toEqual([
36 | dayModifiers[internalModifier]
37 | ]);
38 | }
39 | );
40 | });
41 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /** @type {import('eslint').Linter.Config */
3 | const config = {
4 | parser: '@typescript-eslint/parser',
5 | parserOptions: {
6 | ecmaVersion: 2018,
7 | sourceType: 'module'
8 | },
9 | ignorePatterns: ['**/*.css.d.ts', 'dist', 'build'],
10 | plugins: ['@typescript-eslint', 'jest'],
11 | extends: [
12 | 'plugin:jest/recommended',
13 | 'eslint:recommended',
14 | 'plugin:@typescript-eslint/recommended',
15 | 'plugin:react-hooks/recommended',
16 | 'prettier',
17 | 'plugin:prettier/recommended',
18 | 'plugin:import/recommended',
19 | 'plugin:import/typescript'
20 | ],
21 | settings: {
22 | 'import/parsers': {
23 | '@typescript-eslint/parser': ['.ts', '.tsx']
24 | }
25 | },
26 | rules: {
27 | 'import/no-unresolved': 'off',
28 | 'prettier/prettier': 'warn',
29 | 'no-console': 'warn'
30 | },
31 | overrides: [
32 | {
33 | files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
34 | env: {
35 | jest: true
36 | },
37 | extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
38 | rules: {
39 | 'testing-library/no-render-in-setup': 'off',
40 | 'testing-library/no-node-access': 'off',
41 | 'testing-library/render-result-naming-convention': 'off',
42 | 'testing-library/no-render-in-lifecycle': 'off'
43 | }
44 | }
45 | ]
46 | };
47 |
48 | module.exports = config;
49 |
--------------------------------------------------------------------------------
/website/test-integration/examples/single-required.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import { getDayButton, getTableFooter } from 'react-day-picker/test/selectors';
9 |
10 | import Example from '@examples/single-required';
11 |
12 | const today = new Date(2021, 10, 25);
13 | freezeBeforeAll(today);
14 | let container: HTMLElement;
15 | beforeEach(() => (container = render().container));
16 |
17 | test('should not have AXE violations', async () => {
18 | expect(await axe(container)).toHaveNoViolations();
19 | });
20 |
21 | describe('when a day is clicked', () => {
22 | const day = new Date(2021, 10, 1);
23 | beforeEach(async () => act(() => user.click(getDayButton(day))));
24 | test('should appear as selected', () => {
25 | expect(getDayButton(day)).toHaveAttribute('aria-selected', 'true');
26 | });
27 | test('should update the footer', () => {
28 | expect(getTableFooter()).toHaveTextContent(
29 | 'You selected November 1st, 2021.'
30 | );
31 | });
32 | describe('when the day is clicked again', () => {
33 | beforeEach(async () => act(() => user.click(getDayButton(day))));
34 | test('should appear as selected', () => {
35 | expect(getDayButton(day)).toHaveAttribute('aria-selected', 'true');
36 | });
37 | });
38 | });
39 |
--------------------------------------------------------------------------------
/src/components/YearsDropdown/__snapshots__/YearsDropdown.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`when fromDate and toDate are passed in should render the dropdown element 1`] = `
4 |
7 |
10 | Year:
11 |
12 |
23 |
27 | 2021
28 |
41 |
42 |
7 |
10 | Month:
11 |
12 |
28 |
32 | January
33 |
46 |
47 |
30 |
31 | |
32 | );
33 | }
34 |
35 | return (
36 |
37 | {weekNumberCell}
38 | {props.dates.map((date) => (
39 | |
45 |
46 | |
47 | ))}
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Table/utils/getMonthWeeks.ts:
--------------------------------------------------------------------------------
1 | import {
2 | addWeeks,
3 | endOfMonth,
4 | getWeeksInMonth,
5 | Locale,
6 | startOfMonth
7 | } from 'date-fns';
8 |
9 | import { daysToMonthWeeks } from './daysToMonthWeeks';
10 |
11 | /** Represents a week in the month.*/
12 | export type MonthWeek = {
13 | /** The week number from the start of the year. */
14 | weekNumber: number;
15 | /** The dates in the week. */
16 | dates: Date[];
17 | };
18 |
19 | /**
20 | * Return the weeks belonging to the given month, adding the "outside days" to
21 | * the first and last week.
22 | */
23 | export function getMonthWeeks(
24 | month: Date,
25 | options: {
26 | locale: Locale;
27 | useFixedWeeks?: boolean;
28 | weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
29 | firstWeekContainsDate?: 1 | 4;
30 | ISOWeek?: boolean;
31 | }
32 | ): MonthWeek[] {
33 | const weeksInMonth: MonthWeek[] = daysToMonthWeeks(
34 | startOfMonth(month),
35 | endOfMonth(month),
36 | options
37 | );
38 |
39 | if (options?.useFixedWeeks) {
40 | // Add extra weeks to the month, up to 6 weeks
41 | const nrOfMonthWeeks = getWeeksInMonth(month, options);
42 | if (nrOfMonthWeeks < 6) {
43 | const lastWeek = weeksInMonth[weeksInMonth.length - 1];
44 | const lastDate = lastWeek.dates[lastWeek.dates.length - 1];
45 | const toDate = addWeeks(lastDate, 6 - nrOfMonthWeeks);
46 | const extraWeeks = daysToMonthWeeks(
47 | addWeeks(lastDate, 1),
48 | toDate,
49 | options
50 | );
51 | weeksInMonth.push(...extraWeeks);
52 | }
53 | }
54 | return weeksInMonth;
55 | }
56 |
--------------------------------------------------------------------------------
/website/test-integration/examples/modifiers-today.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { user } from '@site/test/user';
4 | import { freezeBeforeAll } from '@site/test/utils';
5 | import { act, render } from '@testing-library/react';
6 | import { addDays } from 'date-fns';
7 |
8 | import { getDayButton, getTableFooter } from 'react-day-picker/test/selectors';
9 |
10 | import Example from '@examples/modifiers-today';
11 |
12 | const today = new Date(2022, 5, 10);
13 | freezeBeforeAll(today);
14 |
15 | let container: HTMLElement;
16 | beforeEach(() => {
17 | container = render().container;
18 | });
19 |
20 | describe('when rendering a month that contains today', () => {
21 | test('it should add the default class name for today', () => {
22 | expect(getDayButton(today)).toHaveClass('rdp-day_today');
23 | });
24 | test('it should have exactly one ".rdp-day_today" class', () => {
25 | const todays = container.querySelectorAll('.rdp-day_today');
26 | expect(todays).toHaveLength(1);
27 | });
28 | });
29 |
30 | describe('when the today date is clicked', () => {
31 | beforeEach(async () => act(() => user.click(getDayButton(today))));
32 | test('should update the footer', () => {
33 | expect(getTableFooter()).toHaveTextContent('You clicked today’s date');
34 | });
35 | });
36 |
37 | describe('when another date is clicked', () => {
38 | const date = addDays(today, 1);
39 | beforeEach(async () => act(() => user.click(getDayButton(date))));
40 | test('should update the footer', () => {
41 | expect(getTableFooter()).toHaveTextContent('Try clicking today’s date.');
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/src/components/WeekNumber/WeekNumber.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEventHandler } from 'react';
2 |
3 | import { useDayPicker } from 'contexts/DayPicker';
4 |
5 | import { Button } from '../Button';
6 |
7 | /**
8 | * The props for the {@link WeekNumber} component.
9 | */
10 | export interface WeekNumberProps {
11 | /** The number of the week. */
12 | number: number;
13 | /** The dates in the week. */
14 | dates: Date[];
15 | }
16 |
17 | /**
18 | * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
19 | * renders a button, otherwise a span element.
20 | */
21 | export function WeekNumber(props: WeekNumberProps): JSX.Element {
22 | const { number: weekNumber, dates } = props;
23 | const {
24 | onWeekNumberClick,
25 | styles,
26 | classNames,
27 | locale,
28 | labels: { labelWeekNumber },
29 | formatters: { formatWeekNumber }
30 | } = useDayPicker();
31 |
32 | const content = formatWeekNumber(Number(weekNumber), { locale });
33 |
34 | if (!onWeekNumberClick) {
35 | return (
36 |
37 | {content}
38 |
39 | );
40 | }
41 |
42 | const label = labelWeekNumber(Number(weekNumber), { locale });
43 |
44 | const handleClick: MouseEventHandler = function (e) {
45 | onWeekNumberClick(weekNumber, dates, e);
46 | };
47 |
48 | return (
49 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/CaptionNavigation/CaptionNavigation.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEventHandler } from 'react';
2 |
3 | import { isSameMonth } from 'date-fns';
4 |
5 | import { CaptionProps } from 'components/Caption/Caption';
6 | import { Navigation } from 'components/Navigation';
7 | import { useDayPicker } from 'contexts/DayPicker';
8 | import { useNavigation } from 'contexts/Navigation';
9 |
10 | /**
11 | * Render a caption with a button-based navigation.
12 | */
13 | export function CaptionNavigation(props: CaptionProps): JSX.Element {
14 | const { numberOfMonths } = useDayPicker();
15 | const { previousMonth, nextMonth, goToMonth, displayMonths } =
16 | useNavigation();
17 |
18 | const displayIndex = displayMonths.findIndex((month) =>
19 | isSameMonth(props.displayMonth, month)
20 | );
21 |
22 | const isFirst = displayIndex === 0;
23 | const isLast = displayIndex === displayMonths.length - 1;
24 |
25 | const hideNext = numberOfMonths > 1 && (isFirst || !isLast);
26 | const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
27 |
28 | const handlePreviousClick: MouseEventHandler = () => {
29 | if (!previousMonth) return;
30 | goToMonth(previousMonth);
31 | };
32 |
33 | const handleNextClick: MouseEventHandler = () => {
34 | if (!nextMonth) return;
35 | goToMonth(nextMonth);
36 | };
37 |
38 | return (
39 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/website/docs/guides/input-fields.md:
--------------------------------------------------------------------------------
1 | # Input Fields
2 |
3 | It is a common scenario to bind the date picker with an input field. Since these kind of implementations may have different requirements, DayPicker doesn't come with an input field component.
4 |
5 | It is easy to build a custom input field that works together with DayPicker:
6 |
7 | 1. when the input field changes, parse its value and set the selected day in DayPicker
8 | 2. when a day is selected from DayPicker, set the input value formatting the selected date.
9 |
10 | ## Example: Date Picker Dialog
11 |
12 | Implement a DayPicker dialog according to the WAI-ARIA’s [dialog pattern](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) for date pickers.
13 |
14 | The following example uses [react-popper](https://popper.js.org/react-popper/) for the popover.
15 |
16 | ```include-example dependencies=popper,react-popper,@popperjs/core,focus-trap-react,prop-types
17 | date-picker-dialog
18 | ```
19 |
20 | ## Example: Range Selection
21 |
22 | ```include-example
23 | input-range
24 | ```
25 |
26 | ## Example: Time Selection
27 |
28 | DayPicker can also be used alongside a time input field, by setting the time to the selected date.
29 |
30 | ```include-example
31 | input-time
32 | ```
33 |
34 | ## Using the `useInput` Hook
35 |
36 | To bind DayPicker to an input field, DayPicker includes the [useInput hook](/api/functions/useinput), returning props to bind DayPicker with a single input field. Should you need something more sophisticated, give a look to the [useInput](/api/functions/useinput) source to implement your own hook.
37 |
38 | ```include-example
39 | useinput.tsx
40 | ```
41 |
--------------------------------------------------------------------------------
/website/src/theme/CodeBlock/sandpack-app/dark.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 1em;
3 | font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell,
4 | 'Noto Sans', sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
5 | sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
6 | -webkit-font-smoothing: antialiased;
7 | -moz-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: antialiased;
9 | text-rendering: optimizeLegibility;
10 | -webkit-tap-highlight-color: transparent;
11 | -webkit-touch-callout: none;
12 | background-color: #191c1f;
13 | color: #f5f6f7;
14 | }
15 |
16 | input {
17 | font-size: 1em;
18 | padding: 0.4em 0.6em;
19 | }
20 | button {
21 | font-size: 1em;
22 | padding: 0.4em 0.6em;
23 | }
24 | input + button {
25 | margin-left: 0.5em;
26 | }
27 |
28 | .rdp {
29 | --rdp-accent-color-light: var(--rdp-accent-color-dark);
30 | --rdp-accent-color-lighter: var(--rdp-accent-color-darker);
31 | --rdp-accent-color-lightest: var(--rdp-accent-color-darkest);
32 | --rdp-background-color: var(--rdp-background-color-dark);
33 | }
34 |
35 | .dialog-sheet {
36 | background: #191c1f;
37 | border-radius: 4px;
38 | box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.3),
39 | 0px 2px 4px -1px rgba(0, 0, 0, 0.4);
40 | }
41 |
42 | .bg-near-black {
43 | background-color: #eeeeee;
44 | }
45 | .bg-near-white {
46 | background-color: #111111;
47 | }
48 | .black {
49 | color: #ffffff;
50 | }
51 | .white {
52 | color: #eeeeee;
53 | }
54 | .dark-gray {
55 | color: #cccccc;
56 | }
57 | .bg-white {
58 | background-color: #111111;
59 | }
60 | .ba {
61 | border-color: #333;
62 | }
63 |
--------------------------------------------------------------------------------
/website/examples/range-shift-key.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { isSameDay } from 'date-fns';
4 | import {
5 | Button,
6 | DateRange,
7 | DayPicker,
8 | DayProps,
9 | useDayRender
10 | } from 'react-day-picker';
11 |
12 | function DayWithShiftKey(props: DayProps) {
13 | const buttonRef = React.useRef(null);
14 | const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
15 |
16 | if (dayRender.isHidden) {
17 | return <>;
18 | }
19 | if (!dayRender.isButton) {
20 | return ;
21 | }
22 |
23 | const handleClick: React.MouseEventHandler = (e) => {
24 | if (
25 | !dayRender.selectedDays ||
26 | dayRender.activeModifiers.selected ||
27 | e.shiftKey
28 | ) {
29 | dayRender.buttonProps?.onClick?.(e);
30 | }
31 | };
32 |
33 | return (
34 |
35 | );
36 | }
37 |
38 | export default function App() {
39 | const [range, setRange] = React.useState();
40 |
41 | let footer = Please pick a day.
;
42 |
43 | if (range?.from && range?.to) {
44 | if (isSameDay(range.from, range.to)) {
45 | footer = Press Shift to choose more days.
;
46 | } else {
47 | footer = (
48 |
49 | {range.from.toLocaleDateString()}—{range.to.toLocaleDateString()}.
50 |
51 | );
52 | }
53 | }
54 | return (
55 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/src/contexts/DayPicker/defaultClassNames.ts:
--------------------------------------------------------------------------------
1 | import { ClassNames } from 'types/Styles';
2 |
3 | /**
4 | * The name of the default CSS classes.
5 | */
6 | export const defaultClassNames: Required = {
7 | root: 'rdp',
8 | multiple_months: 'rdp-multiple_months',
9 | with_weeknumber: 'rdp-with_weeknumber',
10 | vhidden: 'rdp-vhidden',
11 | button_reset: 'rdp-button_reset',
12 | button: 'rdp-button',
13 |
14 | caption: 'rdp-caption',
15 |
16 | caption_start: 'rdp-caption_start',
17 | caption_end: 'rdp-caption_end',
18 | caption_between: 'rdp-caption_between',
19 | caption_label: 'rdp-caption_label',
20 |
21 | caption_dropdowns: 'rdp-caption_dropdowns',
22 |
23 | dropdown: 'rdp-dropdown',
24 | dropdown_month: 'rdp-dropdown_month',
25 | dropdown_year: 'rdp-dropdown_year',
26 | dropdown_icon: 'rdp-dropdown_icon',
27 |
28 | months: 'rdp-months',
29 | month: 'rdp-month',
30 | table: 'rdp-table',
31 | tbody: 'rdp-tbody',
32 | tfoot: 'rdp-tfoot',
33 |
34 | head: 'rdp-head',
35 | head_row: 'rdp-head_row',
36 | head_cell: 'rdp-head_cell',
37 |
38 | nav: 'rdp-nav',
39 | nav_button: 'rdp-nav_button',
40 | nav_button_previous: 'rdp-nav_button_previous',
41 | nav_button_next: 'rdp-nav_button_next',
42 |
43 | nav_icon: 'rdp-nav_icon',
44 |
45 | row: 'rdp-row',
46 | weeknumber: 'rdp-weeknumber',
47 | cell: 'rdp-cell',
48 |
49 | day: 'rdp-day',
50 | day_today: 'rdp-day_today',
51 | day_outside: 'rdp-day_outside',
52 | day_selected: 'rdp-day_selected',
53 | day_disabled: 'rdp-day_disabled',
54 | day_hidden: 'rdp-day_hidden',
55 | day_range_start: 'rdp-day_range_start',
56 | day_range_end: 'rdp-day_range_end',
57 | day_range_middle: 'rdp-day_range_middle'
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/CaptionDropdowns/CaptionDropdowns.tsx:
--------------------------------------------------------------------------------
1 | import { addMonths } from 'date-fns';
2 |
3 | import { CaptionProps } from 'components/Caption/Caption';
4 | import { CaptionLabel } from 'components/CaptionLabel';
5 | import { MonthsDropdown } from 'components/MonthsDropdown';
6 | import { YearsDropdown } from 'components/YearsDropdown';
7 | import { useDayPicker } from 'contexts/DayPicker';
8 | import { useNavigation } from 'contexts/Navigation';
9 | import { MonthChangeEventHandler } from 'types/EventHandlers';
10 |
11 | /**
12 | * Render a caption with the dropdowns to navigate between months and years.
13 | */
14 | export function CaptionDropdowns(props: CaptionProps): JSX.Element {
15 | const { classNames, styles, components } = useDayPicker();
16 | const { goToMonth } = useNavigation();
17 |
18 | const handleMonthChange: MonthChangeEventHandler = (newMonth) => {
19 | goToMonth(
20 | addMonths(newMonth, props.displayIndex ? -props.displayIndex : 0)
21 | );
22 | };
23 | const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
24 | const captionLabel = (
25 |
26 | );
27 | return (
28 |
32 | {/* Caption label is visually hidden but for a11y. */}
33 |
{captionLabel}
34 |
38 |
42 |
55 | | custom head |
56 |
57 | )
58 | }
59 | });
60 | });
61 |
62 | test('should render the custom component', () => {
63 | expect(screen.getByText('custom head')).toBeInTheDocument();
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/src/contexts/Modifiers/utils/getActiveModifiers.test.ts:
--------------------------------------------------------------------------------
1 | import { addMonths } from 'date-fns';
2 |
3 | import {
4 | InternalModifier,
5 | InternalModifiers,
6 | Modifiers
7 | } from 'types/Modifiers';
8 |
9 | import { getActiveModifiers } from './getActiveModifiers';
10 |
11 | const day = new Date();
12 |
13 | const internalModifiers: InternalModifiers = {
14 | [InternalModifier.Outside]: [],
15 | [InternalModifier.Disabled]: [],
16 | [InternalModifier.Selected]: [],
17 | [InternalModifier.Hidden]: [],
18 | [InternalModifier.Today]: [],
19 | [InternalModifier.RangeStart]: [],
20 | [InternalModifier.RangeEnd]: [],
21 | [InternalModifier.RangeMiddle]: []
22 | };
23 | describe('when the day matches a modifier', () => {
24 | const modifiers: Modifiers = {
25 | ...internalModifiers,
26 | foo: [day]
27 | };
28 | const result = getActiveModifiers(day, modifiers);
29 | test('should return the modifier as active', () => {
30 | expect(result.foo).toBe(true);
31 | });
32 | });
33 | describe('when the day does not match a modifier', () => {
34 | const modifiers: Modifiers = {
35 | ...internalModifiers,
36 | foo: []
37 | };
38 | const result = getActiveModifiers(day, modifiers);
39 | test('should not return the modifier as active', () => {
40 | expect(result.foo).toBeUndefined();
41 | });
42 | });
43 |
44 | describe('when the day is not in the same display month', () => {
45 | const modifiers: Modifiers = {
46 | ...internalModifiers
47 | };
48 | const displayMonth = addMonths(day, 1);
49 | const result = getActiveModifiers(day, modifiers, displayMonth);
50 | test('should not return the modifier as active', () => {
51 | expect(result.outside).toBe(true);
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './DayPicker';
2 | import './style.css';
3 |
4 | export * from 'components/Button';
5 | export * from 'components/Caption';
6 | export * from 'components/CaptionDropdowns';
7 | export * from 'components/CaptionLabel';
8 | export * from 'components/CaptionNavigation';
9 | export * from 'components/Day';
10 | export * from 'components/DayContent';
11 | export * from 'components/Dropdown';
12 | export * from 'components/Footer';
13 | export * from 'components/Head';
14 | export * from 'components/HeadRow';
15 | export * from 'components/IconDropdown';
16 | export * from 'components/IconRight';
17 | export * from 'components/IconLeft';
18 | export * from 'components/Months';
19 | export * from 'components/Row';
20 | export * from 'components/WeekNumber';
21 |
22 | export * from 'hooks/useInput';
23 | export * from 'hooks/useDayRender';
24 | export * from 'hooks/useActiveModifiers';
25 |
26 | export * from 'contexts/DayPicker';
27 | export * from 'contexts/Focus';
28 | export * from 'contexts/Navigation';
29 | export * from 'contexts/RootProvider';
30 | export * from 'contexts/SelectMultiple';
31 | export * from 'contexts/SelectRange';
32 | export * from 'contexts/SelectSingle';
33 |
34 | export * from 'types/DayPickerBase';
35 | export * from 'types/DayPickerDefault';
36 | export * from 'types/DayPickerMultiple';
37 | export * from 'types/DayPickerRange';
38 | export * from 'types/DayPickerSingle';
39 | export * from 'types/EventHandlers';
40 | export * from 'types/Formatters';
41 | export * from 'types/Labels';
42 | export * from 'types/Matchers';
43 | export * from 'types/Modifiers';
44 | export * from 'types/Styles';
45 |
46 | export * from 'contexts/Modifiers/utils/isMatch';
47 | export * from 'contexts/SelectRange/utils/addToRange';
48 |
--------------------------------------------------------------------------------
/website/test-integration/examples/dropdown-buttons.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import {
9 | getMonthDropdown,
10 | getMonthGrid,
11 | getNextButton,
12 | getPrevButton,
13 | getYearDropdown
14 | } from 'react-day-picker/test/selectors';
15 |
16 | import Example from '@examples/dropdown-buttons';
17 |
18 | const today = new Date(2022, 5, 10);
19 | freezeBeforeAll(today);
20 |
21 | let container: HTMLElement;
22 | beforeEach(() => {
23 | container = render().container;
24 | });
25 |
26 | test('should not have AXE violations', async () => {
27 | expect(await axe(container)).toHaveNoViolations();
28 | });
29 |
30 | test('should display the year dropdown', () => {
31 | expect(getYearDropdown()).toBeInTheDocument();
32 | });
33 | test('should display the month dropdown', () => {
34 | expect(getMonthDropdown()).toBeInTheDocument();
35 | });
36 | test('should render the next month button', () => {
37 | expect(getNextButton()).toBeInTheDocument();
38 | });
39 | test('should render the previous month button', () => {
40 | expect(getPrevButton()).toBeInTheDocument();
41 | });
42 |
43 | describe('when choosing a month', () => {
44 | const monthName = 'January';
45 | beforeEach(() =>
46 | act(() => user.selectOptions(getMonthDropdown(), monthName))
47 | );
48 | test('should not have AXE violations', async () => {
49 | expect(await axe(container)).toHaveNoViolations();
50 | });
51 | test('should display the month', () => {
52 | expect(getMonthGrid()).toHaveAccessibleName(`${monthName} 2022`);
53 | });
54 | });
55 |
--------------------------------------------------------------------------------
/website/test-integration/examples/from-to-year.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 | import { differenceInMonths } from 'date-fns';
8 |
9 | import { getNextButton, getPrevButton } from 'react-day-picker/test/selectors';
10 |
11 | import Example from '@examples/from-to-year';
12 |
13 | const fromDate = new Date(2015, 0);
14 | const toDate = new Date(2018, 11);
15 | const today = new Date(2021, 10, 25);
16 | freezeBeforeAll(today);
17 |
18 | let container: HTMLElement;
19 | beforeEach(() => (container = render().container));
20 |
21 | test('should not have AXE violations', async () => {
22 | expect(await axe(container)).toHaveNoViolations();
23 | });
24 | test('the previous month button should be disabled', () => {
25 | expect(getPrevButton()).toBeDisabled();
26 | });
27 | test('the next month button should not be disabled', () => {
28 | expect(getNextButton()).not.toBeDisabled();
29 | });
30 |
31 | describe('when navigating to the last month', () => {
32 | const nOfMonths = differenceInMonths(toDate, fromDate);
33 | beforeEach(async () => {
34 | for (let i = 0; i < nOfMonths; i++) {
35 | await act(() => user.click(getNextButton()));
36 | }
37 | });
38 | test('should not have AXE violations', async () => {
39 | expect(await axe(container)).toHaveNoViolations();
40 | });
41 | test('the previous month button should not be disabled', () => {
42 | expect(getPrevButton()).not.toBeDisabled();
43 | });
44 | test('the next month button should be disabled', () => {
45 | expect(getNextButton()).toBeDisabled();
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/website/test-integration/examples/multiple.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render } from '@testing-library/react';
7 |
8 | import { getDayButton, getTableFooter } from 'react-day-picker/test/selectors';
9 |
10 | import Example from '@examples/multiple';
11 |
12 | const today = new Date(2021, 10, 25);
13 | freezeBeforeAll(today);
14 |
15 | let container: HTMLElement;
16 | beforeEach(() => (container = render().container));
17 |
18 | test('should not have AXE violations', async () => {
19 | expect(await axe(container)).toHaveNoViolations();
20 | });
21 |
22 | describe('when a day is clicked', () => {
23 | const day1 = new Date(2021, 10, 1);
24 | beforeEach(async () => act(() => user.click(getDayButton(day1))));
25 | test('should appear as selected', () => {
26 | expect(getDayButton(day1)).toHaveAttribute('aria-selected', 'true');
27 | });
28 | test('should update the footer', () => {
29 | expect(getTableFooter()).toHaveTextContent('You selected 1 day(s).');
30 | });
31 | describe('when a second day is clicked', () => {
32 | const day2 = new Date(2021, 10, 2);
33 | beforeEach(async () => act(() => user.click(getDayButton(day2))));
34 | test('the first day should appear as selected', () => {
35 | expect(getDayButton(day1)).toHaveAttribute('aria-selected', 'true');
36 | });
37 | test('the second day should appear as selected', () => {
38 | expect(getDayButton(day2)).toHaveAttribute('aria-selected', 'true');
39 | });
40 | test('should update the footer', () => {
41 | expect(getTableFooter()).toHaveTextContent('You selected 2 day(s).');
42 | });
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/src/hooks/useControlledValue/useControlledValue.test.ts:
--------------------------------------------------------------------------------
1 | import { act } from 'react-dom/test-utils';
2 |
3 | import { renderDayPickerHook } from 'test/render';
4 |
5 | import { useControlledValue } from './useControlledValue';
6 |
7 | function renderHook(defaultValue: string, controlledValue: string | undefined) {
8 | return renderDayPickerHook(() =>
9 | useControlledValue(defaultValue, controlledValue)
10 | );
11 | }
12 |
13 | describe('when the value is controlled', () => {
14 | const defaultValue = 'foo'; // not controlled
15 | const controlledValue = 'bar'; // now controlled
16 | test('should return the controlled value', () => {
17 | const result = renderHook(defaultValue, controlledValue);
18 | expect(result.current[0]).toBe(controlledValue);
19 | });
20 | describe('when setting a new value', () => {
21 | const newValue = 'taz';
22 | test('should return the controlled value instead', () => {
23 | const result = renderHook(defaultValue, controlledValue);
24 | act(() => result.current[1](newValue));
25 | expect(result.current[0]).toBe(controlledValue);
26 | });
27 | });
28 | });
29 |
30 | describe('when the value is not controlled', () => {
31 | const defaultValue = 'foo';
32 | const controlledValue = undefined;
33 | test('should return the value', () => {
34 | const result = renderHook(defaultValue, controlledValue);
35 | expect(result.current[0]).toBe(defaultValue);
36 | });
37 | describe('when setting a new value', () => {
38 | const newValue = 'bar';
39 | test('should return the new value', async () => {
40 | const result = renderHook(defaultValue, controlledValue);
41 | await act(() => result.current[1](newValue));
42 | expect(result.current[0]).toBe(newValue);
43 | });
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/website/docs/basics/localization.md:
--------------------------------------------------------------------------------
1 | # Localization
2 |
3 | ## Changing locale
4 |
5 | To change the locale, pass to the `locale` prop a date-fns [Locale object](http://date-fns.org/docs/Locale).
6 |
7 | For example, to localize the calendar in Spanish, import the locale object from date-fns and pass it to the component:
8 |
9 | ```include-example
10 | spanish
11 | ```
12 |
13 | ### Overriding the first day of the week
14 |
15 | Use the `weekStartsOn` prop to change the first day of the week:
16 |
17 | ```include-example
18 | spanish-week-starts-on
19 | ```
20 |
21 | ### First week of the year
22 |
23 | To override the date in the first week of the year, use `firstWeekContainsDate`. Use this prop to change the week number calculation according to [date-fns getWeek](https://date-fns.org/docs/getWeek) function.
24 |
25 | ```include-example
26 | weeknumber-custom
27 | ```
28 |
29 | ## Switching to ISO week dates
30 |
31 | By default, week numbers and week days follow the DayPicker's locale. Use the `ISOWeek` prop to switch to [ISO week dates](https://en.wikipedia.org/wiki/ISO_week_date).
32 |
33 | ```include-example
34 | week-iso
35 | ```
36 |
37 | ## Switching to right-to-left direction
38 |
39 | To add right-to-left text direction, set the `dir` prop to `rtl`.
40 |
41 | ```include-example
42 | rtl
43 | ```
44 |
45 | ## Other numbering systems
46 |
47 | Use [formatters](/guides/formatters) to change the numbering system used in the calendar.
48 |
49 | For example, to switch to hindu-arabic using [toLocaleString](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString):
50 |
51 | ```include-example
52 | numbering-system
53 | ```
54 |
55 | ## ARIA labels translations
56 |
57 | Use the [labels prop](/api/interfaces/daypickerdefaultprops#labels) to translate the labels used for ARIA.
58 |
--------------------------------------------------------------------------------
/tea.yaml:
--------------------------------------------------------------------------------
1 | # https://tea.xyz/what-is-this-file
2 | ---
3 | version: 1.0.0
4 | codeOwners:
5 | - '0xa4B775c3c99CfFaBf82773c57D293cfF8Aac14Fd'
6 | - '0xa0F9a70473cA850F7c60ef7698a1dAfF321bdf2a'
7 | - '0x7F5F5b4742BF1A04DbCD1f83E742cdd658597D1f'
8 | - '0x13d76fC6D16f502afe95e2fC6A95927C905BeC7E'
9 | - '0x63E4aD3Fe18097C228d12Af0Aa78dd861EC70F5b'
10 | - '0xBDe8ADD4a2034475d4F501228b23D5c9F0b195CB'
11 | - '0x45D17eD7917852B9cB4b62Fb08c7227BF5f150F6'
12 | - '0x6CC238840Cb28A6435bE7047f3D47DfAa2e5DbC1'
13 | - '0x73404449Ac35684780bDf917D176fe33Bd71424D'
14 | - '0xa93E9D62cbab2fc753fB009c3a23A64AfaB4c219'
15 | - '0x1264283bCA528E46C21A12A0042a5Ea4951dA9b1'
16 | - '0xBd7B8Cce141E51aaad8dAA9Bb2b49a5fe4c67376'
17 | - '0x1ac6C7Cf2A38fC46d55E22ba25e742117cb6B466'
18 | - '0x99F103FE54DD01238e0678d0578c3581a318b53a'
19 | - '0x7581cCa5dd243e32530f7ba283e73fFe87F91df1'
20 | - '0x215f95C3C7e4892C7FA8f1c56c0a8B5669111987'
21 | - '0x6B4487CCEF6c73d1042E573b1c6494b7A948bd48'
22 | - '0xd0db12E391031d46e071c3154DfCC2e9F1deADb5'
23 | - '0x7a55936cC6B2DA272Aaa69157b27585F63d832C2'
24 | - '0x51302DDA4E29c812d7660049c178d8fEAACA7Df3'
25 | - '0xe7021F0f7aF722D06A6328b864101153Cf864B2a'
26 | - '0xdf611328D77640bE47caa9b381Beb344c4079E7f'
27 | - '0x77bb6B58e8fa740c76534Fa0B0f2bCc03BfB8Da9'
28 | - '0x2c359D2d50589E9CF1cC05bd4FD2b5b66f0ea339'
29 | - '0xE0B36B9bf128715a7528D98ba7431776CbedF611'
30 | - '0x2185E70dBfc350331d97473015114194E9892f35'
31 | - '0xbB8c92bE8F41c538982a5AEaf5559b858E628E1F'
32 | - '0x9722d98924A669d14A889fe0C195ed25D8ed9a1e'
33 | - '0x049e20f78cE63eE6EA79CD0004554FF6526D1f5A'
34 | - '0x9d8bbBD4CC6c49130037741d3f29e4554798198c'
35 | - '0x622F5A30F3862B1Ff91c9e1259B458d9607a1B7f'
36 | - '0xC288049F4dB53288976661Eb87a2986e404EdF16'
37 | - '0x8cA9D137F0da46b7890cA6E0f671745eb97d5735'
38 | quorum: 1
39 |
--------------------------------------------------------------------------------
/website/test-integration/examples/multiple-months-paged.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { axe } from '@site/test/axe';
4 | import { user } from '@site/test/user';
5 | import { freezeBeforeAll } from '@site/test/utils';
6 | import { act, render, screen } from '@testing-library/react';
7 |
8 | import { getPrevButton } from 'react-day-picker/test/selectors';
9 |
10 | import Example from '@examples/multiple-months-paged';
11 |
12 | const today = new Date(2021, 10, 25);
13 | freezeBeforeAll(today);
14 |
15 | let container: HTMLElement;
16 | beforeEach(() => (container = render().container));
17 |
18 | test('should not have AXE violations', async () => {
19 | expect(await axe(container)).toHaveNoViolations();
20 | });
21 |
22 | describe('when rendering November 2021', () => {
23 | test('should render 2 grids', () => {
24 | expect(screen.getAllByRole('grid')).toHaveLength(2);
25 | });
26 | test('the first grid should be November', () => {
27 | const grids = screen.getAllByRole('grid');
28 | expect(grids[0]).toHaveAccessibleName('November 2021');
29 | });
30 | test('the second grid should be December', () => {
31 | expect(screen.getAllByRole('grid')[1]).toHaveAccessibleName(
32 | 'December 2021'
33 | );
34 | });
35 | // Test pagination
36 | describe('when the previous month button is clicked', () => {
37 | beforeEach(async () => act(() => user.click(getPrevButton())));
38 | test('the first month should be October', () => {
39 | const grids = screen.getAllByRole('grid');
40 | expect(grids[0]).toHaveAccessibleName('September 2021');
41 | });
42 | test('the month caption should be November', () => {
43 | const grids = screen.getAllByRole('grid');
44 | expect(grids[1]).toHaveAccessibleName('October 2021');
45 | });
46 | });
47 | });
48 |
--------------------------------------------------------------------------------