gpbl/react-day-picker

★ 6,792TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((react-day-picker))
    What it does
      Calendar UI component
      Date selection
      Range selection
    Tech stack
      React
      TypeScript
      date-fns
    Features
      Multiple calendars
      Accessibility
      Custom styling
    Use cases
      Booking forms
      Event calendars
      Date inputs

mindmap root((react-day-picker)) What it does Calendar UI component Date selection Range selection Tech stack React TypeScript date-fns Features Multiple calendars Accessibility Custom styling Use cases Booking forms Event calendars Date inputs

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a date range picker to a booking form so users can select check-in and check-out dates.

USE CASE 2

Build a calendar widget that highlights specific dates, such as event deadlines or holidays.

USE CASE 3

Create a localized date input for a form that supports Hijri or Hebrew calendar users.

Tech stack

TypeScriptReactdate-fns

Getting it running

Difficulty · easy Time to first run · 5min

MIT license -- use freely in any project, including commercial use, as long as the license notice is kept.

In plain English

DayPicker is a React component library for adding calendar and date picker functionality to web applications. If you are building a website with a form that asks the user to pick a date, a date range, or multiple dates, DayPicker provides the calendar UI component that handles the display and interaction. The preferred package name for version 10 and newer is @daypicker/react. The library is built in TypeScript, which means it includes type definitions out of the box, making it easier to use in TypeScript projects without extra setup. For date calculations and formatting, it relies on date-fns, a widely used JavaScript date utility library. The component compiles to both CommonJS and ESM module formats, so it works across different build setups. One of the key design choices is that DayPicker ships with minimal default styling. You apply your own CSS, or plug in a framework like Tailwind, rather than fighting to override an opinionated visual style. The component supports a wide range of selection modes: single day, multiple days, or a range of days with a start and end. Custom selection logic is also possible. DayPicker handles internationalization by supporting multiple calendar systems beyond the standard Gregorian calendar. Add-on packages provide support for Persian, Hijri, Buddhist, Ethiopic, and Hebrew calendars. You can also set time zones and localize the month and day labels to any language. The component follows WCAG 2.1 AA accessibility guidelines, meaning it is designed to work with screen readers and keyboard navigation. Installation is a single npm command. The full documentation, with live examples and an API reference, is available at daypicker.dev.

Copy-paste prompts

Prompt 1

I'm using @daypicker/react v10. Show me how to set up a date range picker that stores the selected start and end dates in React state.

Prompt 2

How do I style DayPicker with Tailwind CSS? Show me the minimal setup to apply custom styles.

Prompt 3

I need a DayPicker calendar that disables all past dates and highlights a specific set of dates from an array. How do I configure that?

Open on GitHub → Explain another repo

← gpbl on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.