react-trip-date

Accessible, fully customizable date and range picker for React 18 / 19.

• 📅 DatePicker, RangePicker, headless Calendar primitive
• 🌍 Gregorian + Jalali (Persian) calendars, 10 built-in locales via Day.js
• 🎨 Themable via styled-components v6 — drop-in Material-UI shape
• ♿ Full keyboard navigation + ARIA grid semantics
• 📐 Auto-responsive multi-month layout (via ResizeObserver)
• 🪶 ESM-first, tree-shakable, sourcemaps included

Storybook & live docs →

Install

yarn add react-trip-date styled-components dayjs
# or
npm install react-trip-date styled-components dayjs

react@^18 || ^19, react-dom, and styled-components@^6 are peer dependencies.

Quick start

import { DatePicker } from "react-trip-date";

export function Example() {
  return <DatePicker onChange={dates => console.log(dates)} />;
}

Range picker:

import { useState } from "react";
import { RangePicker } from "react-trip-date";

export function Booking() {
  const [range, setRange] = useState({ from: "", to: "" });
  return <RangePicker selectedDays={range} onChange={setRange} />;
}

Headless calendar:

import { Calendar } from "react-trip-date";

<Calendar jalali={false} startOfWeek={1}>
  {weeks =>
    weeks.map((week, i) => (
      <div key={i} className="row">
        {week.map(day => (
          <span key={day.format("YYYY-MM-DD")}>{day.format("DD")}</span>
        ))}
      </div>
    ))
  }
</Calendar>;

API

Full prop tables and live examples in Storybook:

• DatePicker
• RangePicker
• Calendar
• Theming
• Localization
• Accessibility & keyboard nav
• Recipes
• Migration v1 → v2

Develop

git clone https://github.com/samsam-ahmadi/react-trip-date.git
cd react-trip-date
yarn install
yarn storybook   # http://localhost:9009
yarn test
yarn build

Credits

Originally created by Samsam Ahmadi. With thanks to:

• @amiiiirhassan
• @mpourismaiel
• @salehbud

License

GNU GPLv3