Skip to main content

Custom Components

Use the components prop to customize the components used by DayPicker.

Custom Day

You can further refine the interaction with the day cells by using a custom Day component and the useDayRender hook.

Range selections with Shift key

The following example implements a date picker 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}
    />
  );
}

Wrapping the day

Wrap the DayContent element with a time HTML tag.

import React from 'react';
import { DayContent, DayContentProps, DayPicker } from 'react-day-picker';

import { format } from 'date-fns';

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

Custom Row

Example: disable rows in the past

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

import React from 'react';
import { DayPicker, Row, RowProps } from 'react-day-picker';

import { differenceInCalendarDays } from 'date-fns';

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