react-trip-date - GitLite

KO | EN

gitlite — search

#javascript #react #golang #go #rust #deep-learning #java #windows #vue #awesome-list #pytorch #mcp #openai #open-source

react-trip-date

(★ 56)

It's a fully customizable Date/Range picker for ReactJS.

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - release.md
- - ci.yml
  - publish.yml
  - storybook.yml
- pull_request_template.md
- commit-msg
- pre-commit
- main.ts
- manager-head.html
- preview.tsx
- - chevron-left.svg
  - chevron-right.svg
- - Calendar.tsx
  - calendar.type.ts
  - index.ts
- - DisplayMonths.tsx
  - DisplayYears.tsx
  - Header.tsx
  - index.ts
  - TitleOfWeek.tsx
- - constants.ts
  - index.ts
  - theme.ts
  - types.ts
- - datePicker.style.tsx
  - DatePicker.tsx
  - datePicker.type.ts
  - Day.tsx
  - index.ts
  - Months.tsx
- - classNames.ts
  - createCalendar.ts
  - dayjs-config.ts
  - dayjsLocalized.ts
  - getDayFormat.ts
  - handleDayKeyDown.ts
  - isMobile.ts
  - mergeObjects.ts
  - sliceDaysOfMonthToWeeks.ts
  - TestProviders.tsx
  - useCalendarController.ts
  - useClickOutside.ts
  - useControlled.ts
- - Day.tsx
  - index.ts
  - Months.tsx
  - RangePicker.tsx
  - rangePicker.type.ts
- - Calendar.stories.tsx
  - DatePicker.stories.tsx
  - RangePicker.stories.tsx
- index.ts
- setupTests.ts
- styles.d.ts
.eslintrc.cjs
.gitignore
.lintstagedrc
.nvmrc
.prettierrc
.releaserc.json
CHANGELOG.md
commitlint.config.mjs
demo.gif
LICENSE
package.json
README.md
tsconfig.build.json
tsconfig.json
vite.config.ts
vitest.config.ts
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/samsam-ahmadi/react-trip-date

Downloads the entire project code from GitHub to your computer.

cd react-trip-date

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add react-trip-date styled-components dayjs

Type this command into your terminal and run it.

npm install react-trip-date styled-components dayjs

Downloads and installs the libraries listed in package.json.

yarn install

Downloads and installs the libraries listed in package.json.

yarn storybook # http://localhost:9009

Type this command into your terminal and run it.

yarn test

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-trip-date

[![npm](https://img.shields.io/npm/v/react-trip-date.svg)](https://www.npmjs.com/package/react-trip-date)
![downloads](https://img.shields.io/npm/dt/react-trip-date.svg)

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

![Demo for React Trip Date](https://raw.githubusercontent.com/samsam-ahmadi/react-trip-date/master/demo.gif)

- 📅 `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 →](https://samsam-ahmadi.com/react-trip-date/)

## Install

```bash
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

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

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

Range picker:

```tsx
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:

```tsx
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](https://samsam-ahmadi.com/react-trip-date/?path=/docs/components-datepicker--docs)
- [RangePicker](https://samsam-ahmadi.com/react-trip-date/?path=/docs/components-rangepicker--docs)
- [Calendar](https://samsam-ahmadi.com/react-trip-date/?path=/docs/components-calendar--docs)
- [Theming](https://samsam-ahmadi.com/react-trip-date/?path=/docs/docs-theming--docs)
- [Localization](https://samsam-ahmadi.com/react-trip-date/?path=/docs/docs-localization--docs)
- [Accessibility & keyboard nav](https://samsam-ahmadi.com/react-trip-date/?path=/docs/docs-accessibility--docs)
- [Recipes](https://samsam-ahmadi.com/react-trip-date/?path=/docs/docs-recipes--docs)
- [Migration v1 → v2](https://samsam-ahmadi.com/react-trip-date/?path=/docs/docs-migration-v1-%E2%86%92-v2--docs)

## Develop

```bash
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](https://github.com/samsam-ahmadi). With thanks to:

- [@amiiiirhassan](https://github.com/amiiiirhassan)
- [@mpourismaiel](https://github.com/mpourismaiel)
- [@salehbud](https://dribbble.com/salehbud)

## License

[GNU GPLv3](./LICENSE)