Getting Started

1. Add react-day-picker and date-fns to your dependencies:

npm install react-day-picker date-fns   # with npm
pnpm install react-day-picker date-fns  # with pnpm
yarn add react-day-picker date-fns      # with yarn

2. When importing, include the DayPicker CSS in your component:

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

function Component() {
  return <DayPicker />;
}

Example

|

import React from 'react';

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

export default function Example() {
  const [selected, setSelected] = React.useState<Date>();

  let footer = <p>Please pick a day.</p>;
  if (selected) {
    footer = <p>You picked {format(selected, 'PP')}.</p>;
  }
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick a day.