Home page

Display days as disabled

Use the disabledDays prop to display days with a ”disabled” style. You can match a wide range of days by passing one or more different modifiers to disabledDays.

Disabled days are styled using the .DayPicker-Day .DayPicker-Day--disabled CSS selector.

Code

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

export default function Example() {
  return (
    <DayPicker
      initialMonth={new Date(2017, 3)}
      disabledDays={[
        new Date(2017, 3, 12),
        new Date(2017, 3, 2),
        {
          after: new Date(2017, 3, 20),
          before: new Date(2017, 3, 25),
        },
      ]}
    />
  );
}

Result

April 2017
Su
Mo
Tu
We
Th
Fr
Sa
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