gpbl/react-day-picker

gpbl/react-day-picker has 6,866 GitHub stars and 783 forks. GitHot measured +1 stars in 24 hours and +3 in 7 days. Last checked 2026-11-08 17:12 UTC. Last push 2026-10-21.

这些数字如何统计

DayPicker 是一个可自定义的 React 日期选择器组件，可为 Web 应用添加日期选择器、日历和日期输入框。

6,866 星标 783 forks +1 24小时

可以做什么

🛠 Extensive set of props for customizing the calendar.
🎨 Minimal design that can be easily styled with CSS or any CSS framework.
📅 Supports selections of single days, multiple days, ranges of days, or custom selections.
🌍 Can be localized into any language and time zones.

实测星标增长

24小时: +1
7天: +3
15天: 正在收集历史
1个月: 正在收集历史

各周期内的星标净变化，周期相互重叠，并非每日新增。缺失的测量保持空白。星标代表关注度，不代表软件质量。

README.md

原文

React DayPicker

DayPicker is a React component for creating date pickers, calendars, and date inputs for web applications.

@daypicker/react is the preferred package name for DayPicker v10 and newer.

Documentation

See daypicker.dev for guides, examples, and API reference, or read the v10 docs in the repository.

Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected.

Features

🛠 Extensive set of props for customizing the calendar.
🎨 Minimal design that can be easily styled with CSS or any CSS framework.
📅 Supports selections of single days, multiple days, ranges of days, or custom selections.
🌍 Can be localized into any language and time zones.
🌐 Support for ISO 8601 and broadcast calendars, plus Persian, Hijri, Buddhist (Thai), Ethiopic, and Hebrew calendars through @daypicker/* add-on packages.
🦮 Complies with WCAG 2.1 AA requirements for accessibility.
⚙️ Customizable components to extend the rendered elements.
🔤 Easy integration with input fields.

DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on date-fns for date manipulation and formatting.

Installation

Install the preferred DayPicker package name:

npm install @daypicker/react

npm downloads Min gzipped size

Example

import { useState } from "react";

import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
      }
    />
  );
}