DocumentationAPI referencePlayground

Introduction

React DayPicker

DayPicker is a React component to build date pickers, calendars, and date inputs for web applications.

March 2024
SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { useState } from "react";
import { DayPicker } from "react-day-picker";
 
export function Start() {
  const [selected, setSelected] = useState<Date>();
 
  return (
    <div role="application" aria-label="Date Picker">
      <DayPicker mode="single" selected={selected} onSelect={setSelected} />
    </div>
  );
}

Features

Use React DayPicker to create date pickers, calendars, and date inputs in your React applications.

  • Customizable: DayPicker is fully customizable. You can change the appearance, the behavior, and the localization.
  • Accessible: follows the WAI-ARIA guidelines and is tested with screen readers.
  • Lightweight: DayPicker is a small library with no dependencies. It's easy to integrate and use in your React applications.
  • Flexible: DayPicker is designed to be flexible and to fit your needs. You can use it to build date pickers, calendars, and date inputs.
  • Modern: DayPicker is built with modern technologies and follows the latest best practices in web development.

License

DayPicker is released under the MIT License.

Community

Ask for help and share your experience with DayPicker.

Funding

Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.