React DayPicker

https://react-day-picker.js.org/
Admin
DayPicker is a date picker component for React. Renders a monthly calendar to select days. DayPicker...
Tokens:57,879
Snippets:462
Trust Score:8.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install React DayPicker

Source: https://react-day-picker.js.org/

Install the react-day-picker and date-fns packages using npm, pnpm, or yarn.

```bash
npm install react-day-picker date-fns  # using npm  
pnpm install react-day-picker date-fns # using pnpm  
yarn add react-day-picker date-fns     # using yarn  


```

--------------------------------

### Basic DayPicker Example with Date Formatting

Source: https://react-day-picker.js.org/start

A single-date selection example using DayPicker with date-fns for formatting the selected date in the footer. Ensure DayPicker and date-fns are installed and imported.

```javascript
import React from 'react';

import {
  format
} from 'date-fns';
import { DayPicker } from 'react-day-picker';

export default function Example() {
  const [selected, setSelected] = React.useState<Date>();

  let footer = <p>Please pick a day.</p>;
  if (selected) {
    footer = <p>You picked {format(selected, 'PP')}.</p>;
  }
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={footer}
    />
  );
}
```

--------------------------------

### Install React Day Picker and Date-Fns

Source: https://react-day-picker.js.org/start

Install the necessary packages using npm, pnpm, or yarn.

```bash
npm install react-day-picker date-fns   # with npm  
pnpm install react-day-picker date-fns  # with pnpm  
yarn add react-day-picker date-fns      # with yarn  
```

--------------------------------

### Basic DayPicker Example

Source: https://react-day-picker.js.org/

A basic example demonstrating how to use the DayPicker component to select a single date. It includes a custom footer that updates based on the selected date.

```jsx
import { useState } from 'react';  
import { format } from 'date-fns';  
  
import { DayPicker } from 'react-day-picker';  
import 'react-day-picker/dist/style.css';  
  
export default function Example() {  
  const [selected, setSelected] = useState<Date>();  
  
  let footer = <p>Please pick a day.</p>;  
  if (selected) {  
    footer = <p>You picked {format(selected, 'PP')}.</p>;  
  }  
  return (  
    <DayPicker  
      mode="single"  
      selected={selected}  
      onSelect={setSelected}  
      footer={footer}  
    />  
  );  
}  


```

--------------------------------

### Clone Monorepo and Install Dependencies

Source: https://react-day-picker.js.org/development/source

Clone the react-day-picker monorepo and install its dependencies using pnpm.

```bash
$ git clone git@github.com:gpbl/react-day-picker.git  
$ cd react-day-picker  
$ pnpm  

```

--------------------------------

### Development Scripts for Website

Source: https://react-day-picker.js.org/development/source

Scripts to start the documentation website in watch mode or run type checking for the website.

```bash
$ pnpm -F website start                    # start the website in watch mode  

```

```bash
$ pnpm -F website typecheck-watch          # start the typecheck in watch mode for website  

```

--------------------------------

### Date Picker Dialog Example

Source: https://react-day-picker.js.org/guides/input-fields

This example demonstrates how to create a date picker dialog that integrates with an input field. It uses `react-popper` for positioning the dialog and `focus-trap-react` to manage focus within the dialog. The input field allows direct date entry, and selecting a date from the picker updates the input and closes the dialog.

```javascript
import React, { ChangeEventHandler, useRef, useState } from 'react';  
  
import { format, isValid, parse } from 'date-fns';  
import FocusTrap from 'focus-trap-react';  
import { DayPicker, SelectSingleEventHandler } from 'react-day-picker';  
import { usePopper } from 'react-popper';  
  
export default function DatePickerDialog() {  
  const [selected, setSelected] = useState<Date>();  
  const [inputValue, setInputValue] = useState<string>('');  
  const [isPopperOpen, setIsPopperOpen] = useState(false);  
  
  const popperRef = useRef<HTMLDivElement>(null);  
  const buttonRef = useRef<HTMLButtonElement>(null);  
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(  
    null  
  );  
  
  const popper = usePopper(popperRef.current, popperElement, {  
    placement: 'bottom-start'  
  });  
  
  const closePopper = () => {  
    setIsPopperOpen(false);  
    buttonRef?.current?.focus();  
  };  
  
  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {  
    setInputValue(e.currentTarget.value);  
    const date = parse(e.currentTarget.value, 'y-MM-dd', new Date());  
    if (isValid(date)) {  
      setSelected(date);  
    } else {  
      setSelected(undefined);  
    }  
  };  
  
  const handleButtonClick = () => {  
    setIsPopperOpen(true);  
  };  
  
  const handleDaySelect: SelectSingleEventHandler = (date) => {  
    setSelected(date);  
    if (date) {  
      setInputValue(format(date, 'y-MM-dd'));  
      closePopper();  
    } else {  
      setInputValue('');  
    }  
  };  
  
  return (  
    <div>  
      <div ref={popperRef}>  
        <input  
          size={12}  
          type="text"  
          placeholder={format(new Date(), 'y-MM-dd')}  
          value={inputValue}  
          onChange={handleInputChange}  
        />  
        <button  
          ref={buttonRef}  
          type="button"  
          aria-label="Pick a date"  
          onClick={handleButtonClick}  
        >  
          Pick a date  
        </button>  
      </div>  
      {isPopperOpen && (  
        <FocusTrap  
          active  
          focusTrapOptions={{  
            initialFocus: false,  
            allowOutsideClick: true,  
            clickOutsideDeactivates: true,  
            onDeactivate: closePopper,  
            fallbackFocus: buttonRef.current || undefined  
          }}  
        >  
          <div  
            tabIndex={-1}  
            style={popper.styles.popper}  
            className="dialog-sheet"  
            {...popper.attributes.popper}  
            ref={setPopperElement}  
            role="dialog"  
            aria-label="DayPicker calendar"  
          >  
            <DayPicker  
              initialFocus={isPopperOpen}  
              mode="single"  
              defaultMonth={selected}  
              selected={selected}  
              onSelect={handleDaySelect}  
            />  
          </div>  
        </FocusTrap>  
      )}  
    </div>  
  );  
}  
```

--------------------------------

### Configure First Week of the Year and Week Number Formatting

Source: https://react-day-picker.js.org/basics/localization

Use `firstWeekContainsDate` to change the week number calculation and `formatters` to customize the display of week numbers. This example sets the first week of the year to start on day 4 and prefixes week numbers with 'W'.

```jsx
import React from 'react';  
  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {  
  return (  
    <DayPicker  
      showWeekNumber  
      weekStartsOn={2} // Tuesday as first day of the week  
      firstWeekContainsDate={4} // Number the first week of the year from day 4  
      formatters={{  
        // Add `W` prefix to week number  
        formatWeekNumber: (weekNumber) => `W${weekNumber}`  
      }}  
    />  
  );  
}
```

--------------------------------

### onDayTouchStart

Source: https://react-day-picker.js.org/api/interfaces/DayPickerDefaultProps

Optional event callback when a day touch event starts. Inherited from DayPickerBase.

```APIDOC
## onDayTouchStart

### Description
Event callback when a day touch event starts.

### Type
`DayTouchEventHandler`

### Optional
true

### Inherited from
DayPickerBase.onDayTouchStart
```

--------------------------------

### Basic Modifier Examples

Source: https://react-day-picker.js.org/basics/modifiers

Demonstrates adding 'selected', 'disabled', and 'hidden' modifiers to days using their respective props.

```jsx
<DayPicker selected={new Date()} />
<DayPicker disabled={new Date()} />
<DayPicker hidden={new Date()} />
```

--------------------------------

### Include Example Directive

Source: https://react-day-picker.js.org/development/docs

Use the `include-example` directive within a code block to load a Sandpack with the specified files. This is parsed by the custom CodeBlock component.

```markdown
```include-example  
start  
```
```

--------------------------------

### Upgrade DayPicker Dependency

Source: https://react-day-picker.js.org/guides/upgrading

Install the latest version of react-day-picker and date-fns as a peer dependency.

```bash
npm install react-day-picker@latest date-fns  
```

--------------------------------

### Switch to ISO Week Dates

Source: https://react-day-picker.js.org/basics/localization

Use the `ISOWeek` prop to switch to ISO 8601 week dates. This example also shows `showWeekNumber` and `showOutsideDays`.

```jsx
import React from 'react';  
  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {  
  return <DayPicker ISOWeek showWeekNumber showOutsideDays />;  
}
```

--------------------------------

### Date Range Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use the `DateRange` object to match days within a specified range, including the start and end dates. This is ideal for selecting or disabling a contiguous block of dates.

```typescript
// will match the included days, including the two dates  
const rangeMatcher: DateRange = {  
   from: new Date(2019, 1, 2),  
   to: new Date(2019, 1, 5)  
};
```

--------------------------------

### Range Selection with Input Fields

Source: https://react-day-picker.js.org/guides/input-fields

This example shows how to implement range selection using DayPicker, with input fields to manually set the 'from' and 'to' dates. It handles parsing and validation of user input.

```javascript
import React, { ChangeEventHandler, useState } from 'react';  
  
import { format, isAfter, isBefore, isValid, parse } from 'date-fns';  
import {  
  DateRange,  
  DayPicker,  
  SelectRangeEventHandler  
} from 'react-day-picker';  
  
export default function App() {
  const [selectedRange, setSelectedRange] = useState<DateRange>();  
  const [fromValue, setFromValue] = useState<string>('');  
  const [toValue, setToValue] = useState<string>('');  
  
  const handleFromChange: ChangeEventHandler<HTMLInputElement> = (e) => {  
    setFromValue(e.target.value);  
    const date = parse(e.target.value, 'y-MM-dd', new Date());  
    if (!isValid(date)) {  
      return setSelectedRange({ from: undefined, to: undefined });  
    }  
    if (selectedRange?.to && isAfter(date, selectedRange.to)) {  
      setSelectedRange({ from: selectedRange.to, to: date });  
    } else {  
      setSelectedRange({ from: date, to: selectedRange?.to });  
    }  
  };  
  
  const handleToChange: ChangeEventHandler<HTMLInputElement> = (e) => {  
    setToValue(e.target.value);  
    const date = parse(e.target.value, 'y-MM-dd', new Date());  
  
    if (!isValid(date)) {  
      return setSelectedRange({ from: selectedRange?.from, to: undefined });  
    }  
    if (selectedRange?.from && isBefore(date, selectedRange.from)) {  
      setSelectedRange({ from: date, to: selectedRange.from });  
    } else {  
      setSelectedRange({ from: selectedRange?.from, to: date });  
    }  
  };  
  
  const handleRangeSelect: SelectRangeEventHandler = (  
    range: DateRange | undefined  
  ) => {  
    setSelectedRange(range);  
    if (range?.from) {  
      setFromValue(format(range.from, 'y-MM-dd'));  
    } else {  
      setFromValue('');  
    }  
    if (range?.to) {  
      setToValue(format(range.to, 'y-MM-dd'));  
    } else {  
      setToValue('');  
    }  
  };  
  
  return (  
    <DayPicker  
      mode="range"  
      selected={selectedRange}  
      onSelect={handleRangeSelect}  
      footer={  
        <form className="ma2">  
          <input  
            size={10}  
            placeholder="From Date"  
            value={fromValue}  
            onChange={handleFromChange}  
          />  
          {' – '}  
          <input  
            size={10}  
            placeholder="To Date"  
            value={toValue}  
            onChange={handleToChange}  
          />  
        </form>  
      }  
    />  
  );
}
```

--------------------------------

### Time Selection with DayPicker

Source: https://react-day-picker.js.org/guides/input-fields

This example demonstrates integrating DayPicker with a time input. It allows users to select a date and then specify a time, updating the selected date accordingly. The selected date and time are displayed.

```javascript
import React from 'react';  
  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {
  const [selected, setSelected] = React.useState<Date>();  
  const [timeValue, setTimeValue] = React.useState<string>('00:00');  
  
  const handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {  
    const time = e.target.value;  
    if (!selected) {  
      setTimeValue(time);  
      return;  
    }  
    const [hours, minutes] = time.split(':').map((str) => parseInt(str, 10));  
    const newSelectedDate = new Date(  
      selected.getFullYear(),  
      selected.getMonth(),  
      selected.getDate(),  
      hours,  
      minutes  
    );
    setSelected(newSelectedDate);
    setTimeValue(time);
  };
  
  const handleDaySelect = (date: Date | undefined) => {  
    if (!timeValue || !date) {  
      setSelected(date);
      return;
    }
    const [hours, minutes] = timeValue  
      .split(':')  
      .map((str) => parseInt(str, 10));  
    const newDate = new Date(  
      date.getFullYear(),  
      date.getMonth(),  
      date.getDate(),  
      hours,  
      minutes  
    );
    setSelected(newDate);
  };
  
  return (  
    <>
      <DayPicker  
        mode="single"  
        selected={selected}  
        onSelect={handleDaySelect}  
        footer={  
          <>
            <p>  
              Pick a time:{' '}
              <input  
                type="time"  
                value={timeValue}  
                onChange={handleTimeChange}  
              />  
            </p>
            <p>  
              Selected date: {selected ? selected.toLocaleString() : 'none'}  
            </p>
          </>
        }
      />
    </>
  );
}
```

--------------------------------

### Date Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use a `Date` object to match a specific day. This is useful for selecting or disabling a single, precise date.

```typescript
// will match the today's date  
const dateMatcher: Matcher = new Date();
```

--------------------------------

### Date Before Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use the `DateBefore` object to match all days before a specified date. This is useful for enabling or disabling past dates.

```typescript
// will match days before the 2nd of February 2019 }  
const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };
```

--------------------------------

### Boolean Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use a boolean `true` to always match a day. This is useful for enabling all days.

```typescript
// will always match the day  
const booleanMatcher: Matcher = true;
```

--------------------------------

### Add and Style Custom Modifiers

Source: https://react-day-picker.js.org/basics/modifiers

This example demonstrates how to add a custom 'booked' modifier to mark specific days and style them with inline styles. It also shows how to handle click events on these days.

```jsx
import React from 'react';  
  
import { DayClickEventHandler, DayPicker } from 'react-day-picker';  
  
const bookedDays = [new Date(2021, 5, 8), new Date(2021, 5, 9)];  
const bookedStyle = { border: '2px solid currentColor' };  
  
export default function App() {  
  const [booked, setBooked] = React.useState(false);  
  
  const handleDayClick: DayClickEventHandler = (day, modifiers) => {  
    setBooked(day && modifiers.booked);  
  };  
  
  const footer = booked  
    ? 'This day is already booked!'  
    : 'Try to pick a booked day.';  
  
  return (  
    <DayPicker  
      defaultMonth={new Date(2021, 5, 8)}  
      modifiers={{ booked: bookedDays }}  
      modifiersStyles={{ booked: bookedStyle }}  
      onDayClick={handleDayClick}  
      footer={footer}  
    />  
  );  
}  

```

--------------------------------

### Custom Multiple Day Selection

Source: https://react-day-picker.js.org/basics/selecting-days

This example shows how to replicate the `mode="multiple"` selection behavior by managing an array of selected dates. It includes logic to add or remove days from the selection and a reset button.

```javascript
import React, { useState } from 'react';  
  
import { isSameDay } from 'date-fns';  
import { DayClickEventHandler, DayPicker } from 'react-day-picker';  
  
export default function App() {
  const [selectedDays, setSelectedDays] = useState<Date[]>([]);  
  
  const handleDayClick: DayClickEventHandler = (day, modifiers) => {  
    const newSelectedDays = [...selectedDays];  
    if (modifiers.selected) {  
      const index = selectedDays.findIndex((selectedDay) =>  
        isSameDay(day, selectedDay)  
      );  
      newSelectedDays.splice(index, 1);  
    } else {  
      newSelectedDays.push(day);  
    }  
    setSelectedDays(newSelectedDays);  
  };
  
  const handleResetClick = () => setSelectedDays([]);  
  
  let footer = <p>Please pick one or more days.</p>;  
  
  if (selectedDays.length > 0)  
    footer = (
      <p>  
        You selected {selectedDays.length} days.{' '}
        <button onClick={handleResetClick}>Reset</button>  
      </p>  
    );
  
  return (
    <DayPicker  
      onDayClick={handleDayClick}  
      selected={selectedDays}  
      footer={footer}  
    />  
  );
}
```

--------------------------------

### Use Hindu-Arabic Numbering System

Source: https://react-day-picker.js.org/basics/localization

Use the `formatters` prop to change the numbering system. This example switches to Hindu-Arabic numerals using `toLocaleString` and custom formatters for day, week number, and caption.

```jsx
import React from 'react';  
  
import { format } from 'date-fns';  
import { arSA } from 'date-fns/locale';  
import {  
  DateFormatter,  
  DayPicker,  
  WeekNumberFormatter  
} from 'react-day-picker';  
  
const NU_LOCALE = 'ar-u-nu-arab';  
  
const formatDay: DateFormatter = (day) =>  
  day.getDate().toLocaleString(NU_LOCALE);  
  
const formatWeekNumber: WeekNumberFormatter = (weekNumber) => {  
  return weekNumber.toLocaleString(NU_LOCALE);  
};  
  
const formatCaption: DateFormatter = (date, options) => {  
  const y = date.getFullYear().toLocaleString(NU_LOCALE);  
  const m = format(date, 'LLLL', { locale: options?.locale });  
  return `${m} ${y}`;  
};  
  
export default function App() {  
  return (  
    <DayPicker  
      locale={arSA}  
      dir="rtl"  
      showWeekNumber  
      formatters={{ formatDay, formatCaption, formatWeekNumber }}  
    />  
  );  
}
```

--------------------------------

### Function Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use a function that accepts a `Date` object and returns a boolean to dynamically match days based on custom logic. This provides maximum flexibility for complex matching rules.

```typescript
// will match when the function return true  
const functionMatcher: Matcher = (day: Date) => {  
 return day.getMonth() === 2 // match when month is March  
};
```

--------------------------------

### Array Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use an array of `Date` objects to match multiple specific days. This is useful for selecting or disabling a predefined set of dates.

```typescript
// will match the days in the array  
const arrayMatcher: Matcher = [new Date(2019, 1, 2), new Date(2019, 1, 4)];
```

--------------------------------

### Date After Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use the `DateAfter` object to match all days after a specified date. This is useful for enabling or disabling future dates.

```typescript
// will match days after the 2nd of February 2019  
const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };
```

--------------------------------

### Switch to Right-to-Left Direction

Source: https://react-day-picker.js.org/basics/localization

To add right-to-left text direction, set the `dir` prop to `rtl`. This example also sets the locale to Arabic.

```jsx
import React from 'react';  
  
import { arSA } from 'date-fns/locale';  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {  
  return <DayPicker dir="rtl" locale={arSA} />;  
}
```

--------------------------------

### Day of Week Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use the `DayOfWeek` object to match all days belonging to a specific day of the week (0 for Sunday, 6 for Saturday).

```typescript
// will match Sundays  
const dayOfWeekMatcher: DayOfWeek = {  
dayOfWeek: 0  
};
```

--------------------------------

### Selected Modifier Example

Source: https://react-day-picker.js.org/basics/modifiers

Applies the 'selected' modifier to dates when in selection mode. Refer to the Selecting days guide for implementation details.

```jsx
<DayPicker selected={new Date()} />
```

--------------------------------

### Run Integration Tests for Website

Source: https://react-day-picker.js.org/development/source

Execute the integration tests for the website.

```bash
$ pnpm -F website test           # run the integration tests  

```

--------------------------------

### Date Interval Matcher Example

Source: https://react-day-picker.js.org/api/types/Matcher

Use the `DateInterval` object to match days within a specified range, excluding the start and end dates. Useful for defining a period of selectable or disabled days.

```typescript
// will match the included days, except the two dates  
const intervalMatcher: DateInterval = {  
   after: new Date(2019, 1, 2),  
   before: new Date(2019, 1, 5)  
};
```

--------------------------------

### constructor

Source: https://react-day-picker.js.org/api/interfaces/SelectSingleProviderInternal

Initializes a new instance of the SelectSingleProviderInternal class.

```APIDOC
## constructor

### Description
Initializes a new instance of the SelectSingleProviderInternal class.

### Parameters
#### Path Parameters
* **Object** (Object) - Description not available
```

--------------------------------

### ActiveModifiers Type Example

Source: https://react-day-picker.js.org/api/types/ActiveModifiers

An example of how to define and use the ActiveModifiers type. This type is used to represent the modifiers that are matching a day in the calendar.

```typescript
const activeModifiers: ActiveModifiers = {
 selected: true,
 customModifier: true
}
```

--------------------------------

### initialProps

Source: https://react-day-picker.js.org/api/interfaces/SelectSingleProviderInternal

The initial props for the day picker.

```APIDOC
## initialProps

### Description
The initial props for the day picker.

### Parameters
#### Path Parameters
* **initialProps** (DayPickerSingleProps) - Required - The initial props for the day picker.

#### Defined in
src/contexts/SelectSingle/SelectSingleContext.tsx:55
```

--------------------------------

### Run Unit Tests for react-day-picker

Source: https://react-day-picker.js.org/development/source

Execute the unit tests for the react-day-picker package.

```bash
$ pnpm -F react-day-picker test  # run the unit tests  

```

--------------------------------

### Uninstall @types/react-day-picker

Source: https://react-day-picker.js.org/guides/upgrading

Remove the types package if it was previously installed.

```bash
npm uninstall @types/react-day-picker  
```

--------------------------------

### Run Integration Tests in Watch Mode

Source: https://react-day-picker.js.org/development/source

Run the integration tests for the website in watch mode for continuous testing.

```bash
$ pnpm -F website test-watch           # run the integration tests  

```

--------------------------------

### Set Node Version with nvm

Source: https://react-day-picker.js.org/development/source

Use this command to set the Node.js version using nvm.

```bash
$ nvm use  

```

--------------------------------

### Enable Corepack for pnpm

Source: https://react-day-picker.js.org/development/source

Enable corepack to use pnpm package manager.

```bash
$ corepack enabled  

```

--------------------------------

### Change Locale to Spanish

Source: https://react-day-picker.js.org/basics/localization

To change the locale, pass a date-fns Locale object to the `locale` prop. This example shows how to localize the calendar in Spanish.

```jsx
import React from 'react';  
  
import { es } from 'date-fns/locale';  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {  
  return <DayPicker locale={es} />;  
}
```

--------------------------------

### Development Scripts for react-day-picker

Source: https://react-day-picker.js.org/development/source

Useful scripts for development, including type checking and watch modes for the react-day-picker package.

```bash
$ pnpm -F react-day-picker typecheck-watch # start the typecheck in watch mode  

```

```bash
$ pnpm -F react-day-picker develop         # start the build in watch mode  

```

--------------------------------

### IconRight

Source: https://react-day-picker.js.org/api/functions/IconRight

Renders the 'next month' button in the navigation.

```APIDOC
## IconRight

### Description

Renders the "next month" button in the navigation.

### Method

React Component

### Parameters

#### Props

- **props** (StyledComponent) - Required - Props for the styled component.

### Returns

`ReactElement`

### Defined in

`src/components/IconRight/IconRight.tsx:8`
```

--------------------------------

### Footer

Source: https://react-day-picker.js.org/api/functions/Footer

Renders the Footer component. It is empty by default.

```APIDOC
## Function: Footer

▸ **Footer**(`props`): `ReactElement`

Render the Footer component (empty as default).

### Parameters

Name| Type  
---|---
`props`| `FooterProps`

### Returns

`ReactElement`

### Defined in

src/components/Footer/Footer.tsx:11
```

--------------------------------

### Run Unit Tests in Watch Mode

Source: https://react-day-picker.js.org/development/source

Run the unit tests for react-day-picker in watch mode for continuous testing.

```bash
$ pnpm -F react-day-picker test-watch  # run the unit tests  

```

--------------------------------

### Override First Day of the Week

Source: https://react-day-picker.js.org/basics/localization

Use the `weekStartsOn` prop to change the first day of the week. This example sets Sunday as the first day of the week (0).

```jsx
import React from 'react';  
  
import { es } from 'date-fns/locale';  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {  
  return <DayPicker locale={es} weekStartsOn={0} />;  
}
```

--------------------------------

### DayPickerMultipleProps Properties

Source: https://react-day-picker.js.org/api/interfaces/DayPickerMultipleProps

This snippet details the optional properties available for DayPickerMultipleProps, including date and month navigation limits, today's date configuration, and the starting day of the week.

```APIDOC
## DayPickerMultipleProps

### Description
Properties for configuring the DayPicker component, specifically when allowing multiple date selections. This includes options for setting date ranges, defining the current day, and customizing the week's start day.

### Properties

#### `toDate`
- **Type**: `Date`
- **Optional**
- **Description**: The latest day to end the month navigation.

#### `toMonth`
- **Type**: `Date`
- **Optional**
- **Description**: The latest month to end the month navigation.

#### `toYear`
- **Type**: `number`
- **Optional**
- **Description**: The latest year to end the month navigation.

#### `today`
- **Type**: `Date`
- **Optional**
- **Description**: The today’s date. Default is the current date. This Date will get the `today` modifier to style the day.

#### `weekStartsOn`
- **Type**: `0 | 1 | 2 | 3 | 4 | 5 | 6`
- **Optional**
- **Description**: The index of the first day of the week (0 - Sunday). Overrides the locale's one.
- **See**: ISOWeek.
```

--------------------------------

### Disable Past Rows with Custom Row Component

Source: https://react-day-picker.js.org/guides/custom-components

Implement a custom `Row` component to hide entire rows if all dates in that row are in the past. This example uses `date-fns` for date comparisons.

```javascript
import React from 'react';  
  
import { differenceInCalendarDays } from 'date-fns';  
import { DayPicker, Row, RowProps } from 'react-day-picker';  
  
function isPastDate(date: Date) {
  return differenceInCalendarDays(date, new Date()) < 0;  
}
  
function OnlyFutureRow(props: RowProps) {
  const isPastRow = props.dates.every(isPastDate);
  if (isPastRow) return <></>;
  return <Row {...props} />;
}
  
export default function App() {
  return (
    <DayPicker  
      fromDate={new Date()}  
      components={{ Row: OnlyFutureRow }}
      hidden={isPastDate}
      showOutsideDays  
    />  
  );
}
```

--------------------------------

### Add Emoji to Calendar Caption

Source: https://react-day-picker.js.org/guides/formatters

This example shows how to add emojis to the calendar caption based on the season. It defines a function to determine the season and uses it within a custom `formatCaption` formatter.

```jsx
import React from 'react';  
  
import { format } from 'date-fns';  
import { DateFormatter, DayPicker } from 'react-day-picker';  
  
const seasonEmoji: Record<string, string> = {  
  winter: '⛄️',  
  spring: '🌸',  
  summer: '🌻',  
  autumn: '🍂'  
};  
  
const getSeason = (month: Date): string => {  
  const monthNumber = month.getMonth();  
  if (monthNumber >= 0 && monthNumber < 3) return 'winter';  
  if (monthNumber >= 3 && monthNumber < 6) return 'spring';  
  if (monthNumber >= 6 && monthNumber < 9) return 'summer';  
  else return 'autumn';  
};  
  
const formatCaption: DateFormatter = (month, options) => {  
  const season = getSeason(month);  
  return (  
    <>  
      <span role="img" aria-label={season}>  
        {seasonEmoji[season]}  
      </span>{' '}  
      {format(month, 'LLLL', { locale: options?.locale })}  
    </>  
  );  
};  
  
export default function App() {  
  return (  
    <DayPicker fromYear={2020} toYear={2025} formatters={{ formatCaption }} />  
  );  
}  

```

--------------------------------

### SelectSingleProvider

Source: https://react-day-picker.js.org/api/functions/SelectSingleProvider

Provides the values for the SelectSingleProvider. This is a React component that likely sets up context for single date selection functionality.

```APIDOC
## Function: SelectSingleProvider

### Description
Provides the values for the SelectSingleProvider.

### Signature
▸ **SelectSingleProvider**(`props`): `ReactElement`

### Parameters
#### Props
- **props** (`SelectSingleProviderProps`) - Required - The props object for the SelectSingleProvider component.

### Returns
- `ReactElement` - A React element that provides context values.

### Defined in
src/contexts/SelectSingle/SelectSingleContext.tsx:32
```

--------------------------------

### RootProvider

Source: https://react-day-picker.js.org/api/functions/RootProvider

Provides the value for all the context providers. This function is a React component that wraps its children and makes context values available.

```APIDOC
## Function: RootProvider

Provide the value for all the context providers.

### Signature
▸ **RootProvider**(`props`): `ReactElement`

### Parameters
#### Props
- **props** (`RootContext`) - Required - The context object to provide.

### Returns
`ReactElement` - A React element that provides context to its children.

### Defined in
src/contexts/RootProvider.tsx:28
```

--------------------------------

### Update CSS Import Path

Source: https://react-day-picker.js.org/guides/upgrading

Change the import path for the DayPicker stylesheet from `/lib/style.css` to `/dist/style.css`.

```diff
- import `react-day-picker/lib/style.css`  
+ import `react-day-picker/dist/style.css`  
```

--------------------------------

### style

Source: https://react-day-picker.js.org/api/interfaces/DayPickerDefaultProps

Style to apply to the container element. Inherited from DayPickerBase.

```APIDOC
## style

### Description
Style to apply to the container element.

### Type
`CSSProperties`

### Optional
true

### Inherited from
DayPickerBase.style
```

--------------------------------

### Limit Month Navigation by Date

Source: https://react-day-picker.js.org/basics/navigation

Use `fromDate`, `toDate`, `fromMonth`, and `toMonth` props to define a precise range for month navigation. This example limits navigation between June 2015 and November 20, 2015.

```javascript
import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  const defaultMonth = new Date(2015, 5);
  return (
    <DayPicker
      defaultMonth={defaultMonth}
      fromMonth={defaultMonth}
      toDate={new Date(2015, 10, 20)}
    />
  );
}
```

--------------------------------

### Select a Range of Days

Source: https://react-day-picker.js.org/basics/selecting-days

Use `mode="range"` and `onSelect` to enable users to select a range of dates. The `footer` prop can display the selected range.

```javascript
import React, { useState } from 'react';  
  
import { addDays, format } from 'date-fns';  
import { DateRange, DayPicker } from 'react-day-picker';  
  
const pastMonth = new Date(2020, 10, 15);  
  
export default function App() {
  const defaultSelected: DateRange = {  
    from: pastMonth,  
    to: addDays(pastMonth, 4)  
  };
  const [range, setRange] = useState<DateRange | undefined>(defaultSelected);  
  
  let footer = <p>Please pick the first day.</p>;  
  if (range?.from) {  
    if (!range.to) {  
      footer = <p>{format(range.from, 'PPP')}</p>;  
    } else if (range.to) {  
      footer = (
        <p>  
          {format(range.from, 'PPP')}–{format(range.to, 'PPP')}  
        </p>  
      );
    }
  }
  
  return (
    <DayPicker  
      id="test"  
      mode="range"  
      defaultMonth={pastMonth}  
      selected={range}  
      footer={footer}  
      onSelect={setRange}  
    />  
  );
}

```

--------------------------------

### Show Week Numbers and Handle Clicks

Source: https://react-day-picker.js.org/basics/customization

Use `showWeekNumber` to display week numbers in the calendar. The `onWeekNumberClick` prop allows you to handle clicks on these week numbers, for example, to display information about the selected week.

```javascript
import React, { useState } from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  const [weekNumber, setWeekNumber] = useState<number>();

  const footer = weekNumber
    ? `You clicked the week n. ${weekNumber}.`
    : 'Try clicking a week number.';

  return (
    <DayPicker
      showWeekNumber
      onWeekNumberClick={setWeekNumber}
      footer={footer}
    />
  );
}
```

--------------------------------

### toYear

Source: https://react-day-picker.js.org/api/interfaces/DayPickerSingleProps

Specifies the latest year for month navigation. This prop is optional and inherits from DayPickerBase.

```APIDOC
## toYear

### Description

The latest year to end the month navigation.

### Type

`number`

### Optional

`true`

### Defined in

`src/types/DayPickerBase.ts:134`
```

--------------------------------

### Styling with CSS Modules

Source: https://react-day-picker.js.org/basics/styling

Import the CSS module and pass the generated class names to the `classNames` prop. This allows for scoped styling of the DayPicker elements.

```javascript
import React from 'react';

import { ClassNames, DayPicker } from 'react-day-picker';
import styles from 'react-day-picker/dist/style.module.css';

export default function App() {
  const [selectedDay, setSelectedDay] = React.useState<Date>();

  const classNames: ClassNames = {
    ...styles,
    head: 'custom-head'
  };
  return (
    <>
      <style>{`.custom-head { color: red }`}</style>
      <DayPicker
        mode="single"
        classNames={classNames}
        selected={selectedDay}
        onSelect={setSelectedDay}
      />
    </>
  );
}
```

--------------------------------

### Customize Week Number Display

Source: https://react-day-picker.js.org/basics/customization

Use `weekStartsOn` to set the first day of the week and `firstWeekContainsDate` to define the first week of the year. The `formatters.formatWeekNumber` function allows you to change how week numbers are displayed, for example, by adding a prefix.

```javascript
import React from 'react';
  
import { DayPicker } from 'react-day-picker';  
  
export default function App() {
  return (
    <DayPicker  
      showWeekNumber  
      weekStartsOn={2} // Tuesday as first day of the week  
      firstWeekContainsDate={4} // Number the first week of the year from day 4  
      formatters={{
        // Add `W` prefix to week number  
        formatWeekNumber: (weekNumber) => `W${weekNumber}`  
      }}
    />  
  );
}

```

--------------------------------

### Import Default Stylesheet

Source: https://react-day-picker.js.org/basics/styling

Import the default stylesheet for DayPicker in your root component or build pipeline.

```typescript
import 'react-day-picker/dist/style.css';

```

--------------------------------

### Switch to ISO Week Dates

Source: https://react-day-picker.js.org/basics/customization

By default, DayPicker uses locale settings for week calculations. Use the `ISOWeek` prop to switch to the ISO 8601 standard for week numbering, which defines the week starting on Monday and the first week of the year as the one containing the first Thursday.

```javascript
import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  return <DayPicker ISOWeek showWeekNumber />;
}
```

--------------------------------

### Enable Single Day Selection

Source: https://react-day-picker.js.org/basics/selecting-days

Use `mode="single"` to allow users to select only one day. The `onSelect` prop will provide the selected date.

```jsx
import React, { useState } from 'react';
  
import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';
  
export default function App() {
  const [selectedDay, setSelectedDay] = useState<Date>();
  
  const footer = selectedDay ? (
    <p>You selected {format(selectedDay, 'PPP')}.</p>
  ) : (
    <p>Please pick a day.</p>
  );
  
  return (
    <DayPicker
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      footer={footer}
    />
  );
}
```

--------------------------------

### Dropdown

Source: https://react-day-picker.js.org/api/functions/Dropdown

Renders a styled select component, displaying a caption and a custom drop-down icon.

```APIDOC
## Dropdown

### Description

Renders a styled select component, displaying a caption and a custom drop-down icon.

### Method

React Component

### Parameters

#### Props

- **props** (DropdownProps) - Required - The properties for the Dropdown component.

### Returns

- ReactElement - The rendered React element for the Dropdown component.

### Defined in

`src/components/Dropdown/Dropdown.tsx:31`
```

--------------------------------

### UseInputOptions Properties

Source: https://react-day-picker.js.org/api/interfaces/UseInputOptions

This section details the properties available for the UseInputOptions interface, which allow customization of date input fields.

```APIDOC
## Interface: UseInputOptions

### Description
Defines the configuration options for an input element used with a date picker.

### Properties

#### `defaultSelected`
- **Type**: `Date`
- **Optional**
- **Description**: The initially selected date.

#### `format`
- **Type**: `string`
- **Optional**
- **Default Value**: `PP`
- **Description**: The format string for formatting the input field. See https://date-fns.org/docs/format for a list of format strings.

#### `fromDate`
- **Type**: `Date`
- **Optional**
- **Description**: The earliest day to start the month navigation. Inherited from `Pick.fromDate`.

#### `fromMonth`
- **Type**: `Date`
- **Optional**
- **Description**: The earliest month to start the month navigation. Inherited from `Pick.fromMonth`.

#### `fromYear`
- **Type**: `number`
- **Optional**
- **Description**: The earliest year to start the month navigation. Inherited from `Pick.fromYear`.

#### `locale`
- **Type**: `Locale`
- **Optional**
- **Default Value**: `en-US`
- **Description**: The date-fns locale object used to localize dates. Inherited from `Pick.locale`.

#### `required`
- **Type**: `boolean`
- **Optional**
- **Description**: Make the selection required.

#### `toDate`
- **Type**: `Date`
- **Optional**
- **Description**: The latest day to end the month navigation. Inherited from `Pick.toDate`.

#### `toMonth`
- **Type**: `Date`
- **Optional**
- **Description**: The latest month to end the month navigation. Inherited from `Pick.toMonth`.

#### `toYear`
- **Type**: `number`
- **Optional**
- **Description**: The latest year to end the month navigation. Inherited from `Pick.toYear`.

#### `today`
- **Type**: `Date`
- **Optional**
- **Description**: The today’s date. Default is the current date. This Date will get the `today` modifier to style the day. Inherited from `Pick.today`.
```

--------------------------------

### style

Source: https://react-day-picker.js.org/api/interfaces/DayPickerBase

Allows applying custom CSS styles directly to the container element of the DayPicker.

```APIDOC
## style

### Description
Style to apply to the container element.

### Type
`CSSProperties`

### Defined in
`src/types/DayPickerBase.ts:70`
```

--------------------------------

### DayPickerProvider

Source: https://react-day-picker.js.org/api/functions/DayPickerProvider

The provider for the DayPickerContext, assigning the defaults from the initial DayPicker props.

```APIDOC
## DayPickerProvider

### Description
The provider for the DayPickerContext, assigning the defaults from the initial DayPicker props.

### Parameters
#### Props
- **props** (DayPickerProviderProps) - Required - The props for the DayPickerProvider.

### Returns
`ReactElement`

### Defined in
src/contexts/DayPicker/DayPickerContext.tsx:72
```

--------------------------------

### toDate

Source: https://react-day-picker.js.org/api/interfaces/DayPickerBase

Specifies the latest date that can be navigated to, effectively setting an end boundary for month navigation.

```APIDOC
## toDate

### Description
The latest day to end the month navigation.

### Type
`Date`

### Defined in
`src/types/DayPickerBase.ts:118`
```
Tokens:
Raw