react-day-picker/website/docs/guides/custom-components.mdx

Customizable Date Picker for React

---
sidebar_position: 4
---

# Custom Components

Custom components allows to customize or replace the components rendering the DayPicker HTML elements.

By implementing custom components, you can enhance DayPicker to align with your design system, modify navigation behavior, or present unique content within day cells.

To start using custom components,

- Get familiar with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx).
- Make sure you don't break [accessibility](../docs/accessibility.mdx) when customizing components.
- Custom components may not have a stable API yet and may break in a minor release.

| Prop Name    | Type                                                          | Description                            |
| ------------ | ------------------------------------------------------------- | -------------------------------------- |
| `components` | [`CustomComponents`](../api/type-aliases/CustomComponents.md) | Change the components of the calendar. |

```tsx
<DayPicker
  components={{
    Day: CustomDay,
    Month: CustomMonth,
    ...
  }}
/>
```

## List of Custom Components

| Function                                          | Description                                                                                          |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [Button](functions/Button.md)                     | Render the button elements in the calendar.                                                          |
| [CaptionLabel](functions/CaptionLabel.md)         | Render the label in the month caption.                                                               |
| [Chevron](functions/Chevron.md)                   | Render the chevron icon used in the navigation buttons and dropdowns.                                |
| [Day](functions/Day.md)                           | Render the gridcell of a day in the calendar and handle the interaction and the focus with they day. |
| [DayButton](functions/DayButton.md)               | Render the button for a day in the calendar.                                                         |
| [Dropdown](functions/Dropdown.md)                 | Render a dropdown component to use in the navigation bar.                                            |
| [DropdownNav](functions/DropdownNav.md)           | Render the the navigation dropdowns.                                                                 |
| [Footer](functions/Footer.md)                     | Component wrapping the footer.                                                                       |
| [Month](functions/Month.md)                       | Render the grid with the weekday header row and the weeks for the given month.                       |
| [MonthCaption](functions/MonthCaption.md)         | Render the caption of a month in the calendar.                                                       |
| [MonthGrid](functions/MonthGrid.md)               | Render the grid of days in a month.                                                                  |
| [Months](functions/Months.md)                     | Component wrapping the month grids.                                                                  |
| [Nav](functions/Nav.md)                           | Render the toolbar with the navigation button.                                                       |
| [Option](functions/Option.md)                     | Render the `option` element.                                                                         |
| [Root](functions/Root.md)                         | Render the root element.                                                                             |
| [Select](functions/Select.md)                     | Render the `select` element.                                                                         |
| [Week](functions/Week.md)                         | Render a row in the calendar, with the days and the week number.                                     |
| [WeekNumber](functions/WeekNumber.md)             | Render the cell with the number of the week.                                                         |
| [WeekNumberHeader](functions/WeekNumberHeader.md) | Render the column header for the week numbers.                                                       |
| [Weekday](functions/Weekday.md)                   | Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).                              |
| [Weekdays](functions/Weekdays.md)                 | Render the row with the weekday names.                                                               |
| [Weeks](functions/Weeks.md)                       | Render the weeks in the month grid.                                                                  |

## Example: Custom DayButton component

For example, if you need to customize the component displaying the date, replace the [`DayButton`](../api/functions/DayButton.md) component:

```tsx title="./MyDatePicker.tsx"
import { DayPicker, type DayButtonProps } from "react-day-picker";

function HighlightDay(props: DayButtonProps) {
  const { day, modifiers, ...buttonProps } = props;
  return (
    <button {...buttonProps} style={{ whiteSpace: "nowrap" }}>
      {props.day.date.getDate() === 19 ? `🎉` : props.children}
    </button>
  );
}

export function CustomDayButton() {
  return <DayPicker mode="single" components={{ DayButton: HighlightDay }} />;
}
```

<BrowserWindow>
  <Examples.CustomDayButton />
</BrowserWindow>

## DayPicker Hook

When creating custom components, you will find useful the `useDayPicker` hook, providing access to the internal state and methods of the DayPicker component.

| Function                                           | Description                     |
| :------------------------------------------------- | :------------------------------ |
| [`useDayPicker`](../api/functions/useDayPicker.md) | Access to the DayPicker context |

### Example: Range with Shift Key

Implement a custom `Day` component to select ranges while pressing the <kbd>Shift</kbd> key.

```tsx
import React, { MouseEventHandler } from "react";

import {
  DateRange,
  DayPicker,
  type DayProps,
  useRange
} from "react-day-picker";

function DayWithShiftKey(props: DayProps) {
  const { selected } = useRange();
  const onClick = props.htmlAttributes?.onClick;

  const handleClick: MouseEventHandler<HTMLElement> = (e) => {
    if (selected.from && !selected.to && !isSameDay(props.day.date, selected.from) && !e.shiftKey && ) {
      return;
    }
    onClick?.(e);
  };
  return (
    <div {...props.htmlAttributes} onClick={handleClick}>
      {props.children}
    </div>
  );
}

export function RangeShiftKey() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: undefined
  });

  let footer = "Please pick a day.";

  if (range?.from && !range?.to) {
    footer = "Press Shift to choose more days.";
  } else if (range?.to) {
    const formattedFrom = range.from?.toDateString();
    const formattedTo = range.to.toDateString();
    footer = `You selected the days between ${formattedFrom} and ${formattedTo}`;
  }
  return (
    <DayPicker
      components={{
        DayButton: DayWithShiftKey
      }}
      mode="range"
      selected={range}
      onSelect={setRange}
      footer={footer}
    />
  );
}
```

<BrowserWindow>
  <Examples.RangeShiftKey />
</BrowserWindow>