Skip to main content

Custom Components

Use the components prop to to swap the internal components used by DayPicker.

The useNavigation, useDayPicker and useDay hooks returns values that can help to build the components.

Example: wrap the day#

Wrap the DayContent element with a time HTML tag.

import * as React from 'react';
import { format } from 'date-fns';
import { DayContent, DayContentProps, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
function DateTime(props: DayContentProps) {
const dateTime = format(props.date, 'yyyy-MM-dd');
return (
<time dateTime={dateTime}>
<DayContent {...props} />
</time>
);
}
export default function Example() {
return <DayPicker components={{ DayContent: DateTime }} />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.

Example: disable rows in the past#

Implement a custom component to hide the rows of past weeks.

import * as React from 'react';
import { differenceInCalendarDays } from 'date-fns';
import { DayPicker, Row, RowProps } from 'react-day-picker';
import 'react-day-picker/style.css';
function isPastDate(date) {
return differenceInCalendarDays(date, new Date()) < 0;
}
function OnlyFutureRow(props: RowProps) {
const isPastRow = props.dates.every(isPastDate);
if (isPastRow) return <></>;
return <Row {...props} />;
}
export default function Example() {
return (
<DayPicker
fromDate={new Date()}
components={{ Row: OnlyFutureRow }}
hidden={isPastDate}
showOutsideDays
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)
1st April (Thursday)
2nd April (Friday)
3rd April (Saturday)

Example: extend selection mode#

Implement a Day component to select ranges only when the shift key is pressed:

import * as React from 'react';
import { Button, DayPicker, DayProps, useDay } from 'react-day-picker';
import 'react-day-picker/style.css';
/**
* A custom `Day` component that will enable a range selection only when the
* shift key is pressed.
*/
function Day(props: DayProps) {
const buttonRef = React.useRef<HTMLButtonElement>(null);
const { buttonProps, nonInteractiveProps, selected, modifiers } = useDay(
props.date,
props.displayMonth,
buttonRef
);
if (!buttonProps && !nonInteractiveProps) return <></>;
if (nonInteractiveProps) return <div {...nonInteractiveProps} />;
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!selected || modifiers.selected || e.shiftKey) {
buttonProps.onClick(e);
}
};
return <Button {...buttonProps} ref={buttonRef} onClick={handleClick} />;
}
export default function Example() {
return <DayPicker components={{ Day }} mode="range" />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.