Skip to content

gpbl/react-day-picker

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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
npm version npm downloads stars sponsors

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.