Package Exports

react-day-picker
react-day-picker/dist/index.esm.js
react-day-picker/dist/index.js
react-day-picker/dist/style.css
react-day-picker/dist/style.module.css
react-day-picker/src/style.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-day-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React DayPicker

React DayPicker is a date picker component for React. Renders a calendar where the user can browse months to select days. DayPicker is customizable, works great with input fields and can be styled to match any design.

➡️ react-day-picker.js.org for guides, examples and API reference.

Shows a screenshot of the React DayPicker component in a browser’s window.

Main features

☀️ Select days, ranges or whatever
🧘‍♀️ using date-fns as date library
🌎 Localizable into any language
➡️ Keyboard navigation
♿️ WAI-ARIA support
🤖 Written in TypeScript
🎨 Easy to style and customize
🗓 Support multiple calendars
📄 Easy to integrate input fields

Installation

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

Example

import React 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] = 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}
    />
  );
}

Documentation

See react-day-picker.js.org for guides, examples and API reference of the latest version. Docs for version 7 are at react-day-picker-v7.netlify.app.