DOCSEARCHbyAlgolia
Submit Docs

react-day-picker

website·Indexed 29 days ago

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

A React date picker component that supports single, multiple, and range selections. The library includes features for localization, keyboard navigation, custom components, and modifiers, with v8 introducing new props and styles.

Tokens
37.4K
Snippets
257
Records
395
Agent score
68%

What's inside react-day-picker

  1. Overview of React DayPicker

    React DayPicker is a customizable date picker component for React that renders a monthly calendar for selecting days, ranges, or other date configurations. It is written in TypeScript, supports WAI-ARIA for accessibility, provides keyboard navigation, and is localizable into any language. It relies on the date-fns library for date logic and supports multiple calendars and integration with input fields.

  3. Understand DayPicker modifiers

    In DayPicker, a modifier is applied to a day when it matches a specific condition (a Matcher). Modifiers are used to change the appearance of days or to detect user interactions. DayPicker includes several internal modifiers such as disabled, selected, hidden, today, and range_start.

  4. Use SelectMultipleContext for multiple selection mode

    The SelectMultipleContext is a React context used to share details about selected days when the day picker is in multiple selection mode. It holds a value of type SelectMultipleContextValue or undefined. To access the data within this context, use the useSelectMultiple hook.
    // The context is defined as:
const SelectMultipleContext: Context<undefined | SelectMultipleContextValue>;

  6. Use FocusContext to track the focused day

    The FocusContext is a React context used to share details about the currently focused day for keyboard navigation within the day picker. To access the value of this context in a component, use the useFocusContext hook.
    // The FocusContext type definition
const FocusContext: Context<undefined | FocusContextValue>;

  8. Use SelectRangeContext to share range selection state

    The SelectRangeContext is a React context used to share details about selected days when the calendar is in range selection mode. To access the values provided by this context, use the useSelectRange hook.
    // The context type is Context<undefined | SelectRangeContextValue>
import { SelectRangeContext } from 'react-day-picker';

  9. Use SelectSingleContext for single selection mode

    The SelectSingleContext is a React context that shares details about the selected days when the day picker is in single selection mode. It holds a value of type undefined or SelectSingleContextValue. To access the data within this context, use the useSelectSingle hook.
    // Access the context using the hook
const { selected } = useSelectSingle();

  10. Upgrade react-day-picker from v7 to v8

    Upgrading to v8 requires updating dependencies, adjusting CSS imports, and replacing legacy utilities. Note that date-fns is now a peer dependency.
    # 1. Upgrade dependency and add date-fns
npm install react-day-picker@latest date-fns

# 2. Remove legacy types package
npm uninstall @types/react-day-picker

  11. Implement multiple day selection in DayPicker

    To allow users to select multiple individual days, set mode="multiple". The selected prop should be an array of dates (Date[]), and onSelect will provide the updated array of selected dates.
    import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
  const [days, setDays] = useState<Date[]>([]);

  return (
    <DayPicker
      mode="multiple"
      selected={days}
      onSelect={setDays}
    />
  );
}

  12. Install and configure default DayPicker styles

    DayPicker provides a minimal, lightweight default appearance. To use it, import the provided CSS file into your root component or build pipeline. You can customize the appearance globally by overriding the CSS variables defined within the .rdp class.
    // Import default styles
import 'react-day-picker/dist/style.css';
    /* Override global variables in your CSS */
.rdp {
  --rdp-cell-size: 40px;
  --rdp-caption-font-size: 18px;
  --rdp-accent-color: #0000ff;
  --rdp-background-color: #e7edff;
  --rdp-accent-color-dark: #3003e1;
  --rdp-background-color-dark: #180270;
  --rdp-outline: 2px solid var(--rdp-accent-color);
  --rdp-outline-selected: 3px solid var(--rdp-accent-color);
  --rdp-selected-color: #fff;
}