Skip to main content

Custom Components

Use the components prop to replace some of the internal components used by DayPicker with a custom implementation.

Components that can be changed are described in the CustomComponents interface.

note

Custom components are an advanced feature. Look at the components source to understand how the internal components are built.

DayPicker hooks

When creating custom components, you will find useful the DayPicker hooks:

Examples

Custom Caption

Implement a custom Caption component with next/previous buttons. Note the use of the useNavigation hook to navigate between months.

|
import React from 'react';

import { format } from 'date-fns';
import { CaptionProps, DayPicker, useNavigation } from 'react-day-picker';

function CustomCaption(props: CaptionProps) {
const { goToMonth, nextMonth, previousMonth } = useNavigation();
return (
<h2>
{format(props.displayMonth, 'MMM yyy')}
<button
disabled={!previousMonth}
onClick={() => previousMonth && goToMonth(previousMonth)}
>
Previous
</button>
<button
disabled={!nextMonth}
onClick={() => nextMonth && goToMonth(nextMonth)}
>
Next
</button>
</h2>
);
}

export default function App() {
return (
<DayPicker
components={{
Caption: CustomCaption
}}
/>
);
}

Dec 2023

SuMoTuWeThFrSa

Wrapping the day

Implement a custom DayContent component

|
import React from 'react';

import { format } from 'date-fns';
import { DayContent, DayContentProps, DayPicker } from 'react-day-picker';

function DateTime(props: DayContentProps) {
const dateTime = format(props.date, 'yyyy-MM-dd');
return (
<time dateTime={dateTime}>
<DayContent {...props} />
</time>
);
}

export default function App() {
return <DayPicker components={{ DayContent: DateTime }} />;
}
SuMoTuWeThFrSa

Range selections with Shift key

Implement a custom Day component to select ranges while pressing the Shift key.

|
import React from 'react';

import { isSameDay } from 'date-fns';
import {
Button,
DateRange,
DayPicker,
DayProps,
useDayRender
} from 'react-day-picker';

function DayWithShiftKey(props: DayProps) {
const buttonRef = React.useRef<HTMLButtonElement>(null);
const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);

if (dayRender.isHidden) {
return <></>;
}
if (!dayRender.isButton) {
return <div {...dayRender.divProps} />;
}

const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (
!dayRender.selectedDays ||
dayRender.activeModifiers.selected ||
e.shiftKey
) {
dayRender.buttonProps?.onClick?.(e);
}
};

return (
<Button {...dayRender.buttonProps} ref={buttonRef} onClick={handleClick} />
);
}

export default function App() {
const [range, setRange] = React.useState<DateRange>();

let footer = <p>Please pick a day.</p>;

if (range?.from && range?.to) {
if (isSameDay(range.from, range.to)) {
footer = <p>Press Shift to choose more days.</p>;
} else {
footer = (
<p>
{range.from.toLocaleDateString()}{range.to.toLocaleDateString()}.
</p>
);
}
}
return (
<DayPicker
components={{
Day: DayWithShiftKey
}}
mode="range"
onSelect={setRange}
selected={range}
footer={footer}
/>
);
}
SuMoTuWeThFrSa

Please pick a day.

Disable rows in the past

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

|
import React from 'react';

import { differenceInCalendarDays } from 'date-fns';
import { DayPicker, Row, RowProps } from 'react-day-picker';

function isPastDate(date: 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 App() {
return (
<DayPicker
fromDate={new Date()}
components={{ Row: OnlyFutureRow }}
hidden={isPastDate}
showOutsideDays
/>
);
}
SuMoTuWeThFrSa