Home page
  • Docs & API
  • Examples
  • Support
  • Contribute
  • v7.4.10
  • GitHub logo

Examples

  • Simple calendar
  • Simple input field

Customization

  • Outside days
  • Week numbers
  • Fixed weeks
  • Today button

Rendering months

  • Change the initial month
  • Prevent months navigation
  • Restrict months navigation
  • Multiple months
  • Paged navigation
  • Reverse navigation

Selecting days

  • Display days as selected
  • Selected day in state
  • Select multiple days
  • Select range on click
  • Select range on mouse enter
  • Selecting an entire week

Disabling days

  • Display days as disabled
  • Disable weekends
  • Interaction with disabled days

Input field

  • Using input with state
  • Customize the overlay
  • Using moment.js to parse and format dates
  • Using date-fns to parse and format dates
  • Range with two inputs

Matching days

  • Add CSS modifiers to day cells
  • Inline style day cells

Localization

  • Localization
  • Localization with moment.js

Customizing elements

  • Switch between years and months
  • Add content to day cells
  • Navbar and weekdays

Fixed weeks

Use the fixedWeeks prop to display 6 weeks per month.

Code


import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default function Example() {
  return <DayPicker fixedWeeks />;
}

Result


March 2021
Su
Mo
Tu
We
Th
Fr
Sa
28
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
1
2
3
4
5
6
7
8
9
10