React DayPicker

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

➡️ @ffras4vnpm/numquam-ducimus-aperiam.js.org for guides, examples and API reference.

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 @ffras4vnpm/numquam-ducimus-aperiam date-fns  # using npm
pnpm install @ffras4vnpm/numquam-ducimus-aperiam date-fns # using pnpm
yarn add @ffras4vnpm/numquam-ducimus-aperiam date-fns     # using yarn

Example

import { useState } from "react";

import { format } from "date-fns";
import { DayPicker } from "@ffras4vnpm/numquam-ducimus-aperiam";
import "@ffras4vnpm/numquam-ducimus-aperiam/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}
    />
  );
}

Documentation

See @ffras4vnpm/numquam-ducimus-aperiam.js.org for guides, examples and API reference of the latest version. Docs for version 7 are at @ffras4vnpm/numquam-ducimus-aperiam-v7.netlify.app.