---
id: modifiers-matching-days
title: Matching Days
---

> Explore the different options to define when a day should match a modifier.

## Matching a single day

Pass a date to match a single day.

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={new Date(2020, 8, 9)}
    />
  );
}
```

## Matching multiple days

Pass an array of dates to match multiple days.

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={[
        new Date(2020, 8, 9),
        new Date(2020, 8, 10),
        new Date(2020, 8, 11),
      ]}
    />
  );
}
```

## Matching days between a range

Pass a `{ before, after }` object.

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={{
        after: new Date(2020, 8, 9),
        before: new Date(2020, 8, 19),
      }}
    />
  );
}
```

It is possible to omit the `before` or `after` keys:

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={{
        after: new Date(2020, 8, 9),
      }}
    />
  );
}
```

## Matching days of the week

Pass an array of days of the week (`0` being Sunday) to a `daysOfWeek` object.

For example, to select Sundays and Tuesdays:

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={{ daysOfWeek: [0, 2] }}
    />
  );
}
```

## Matching everything

Pass a function returning a boolean value:

```jsx preview
function App() {
  const isBirthday = day => day.getDate() === 19 && day.getMonth() === 8;
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={isBirthday}
    />
  );
}
```

## Combining types

Pass an array to mix multiple types:

```jsx preview
function App() {
  const isBirthday = day => day.getDate() === 19 && day.getMonth() === 8;
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      numberOfMonths={2}
      selected={[
        isBirthday,
        {
          after: new Date(2020, 8, 1),
          before: new Date(2020, 8, 6),
        },
        {
          after: new Date(2020, 9, 14),
          before: new Date(2020, 9, 19),
        },
        new Date(2020, 8, 21),
      ]}
    />
  );
}
```
