Skip to main content

Get Started

To start using DayPicker in your project add react-day-picker to your dependencies:

yarn add react-day-picker@next # when using yarn
npm install react-day-picker@next # when using npm

Example#

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const [selected, setSelected] = React.useState<Date | undefined>();
const footer = selected
? `You selected ${selected.toLocaleDateString()}.`
: 'Please pick a day.';
return <DayPicker mode="single" onSelect={setSelected} footer={footer} />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Please pick a day.

Next#

Continue with the tutorial and see how to navigate months.

You can also: