A headless, highly customizable, multi-calendar date picker component for React. It supports various calendars and locales.

https://sepehr09.github.io/headless-react-datepicker/

All calendars are supported by the ECMAScript's Intl API:

• Gregory
• Persian
• Indian
• Iso8601
• Japanese
• Buddhist
• Chinese
• Coptic
• Dangi
• Ethioaa
• Ethiopic
• Hebrew
• Islamic
• Islamic-umalqura
• Islamic-tbla
• Islamic-civil
• Islamic-rgsa
• Islamicc
• Roc

All locales are supported by the Intl API.

npm install headless-react-datepicker

# or

yarn add headless-react-datepicker

# or

pnpm add headless-react-datepicker

import "headless-react-datepicker/dist/styles.css";

import React from "react";
import DatePickerProvider, {
  Title,
  Header,
  WeekDays,
  DaySlots,
} from "headless-react-datepicker";

const MyAwesomeDatePicker = () => {
  return (
    <DatePickerProvider>
      <Title />
      <Header />
      <WeekDays />
      <DaySlots />
    </DatePickerProvider>
  );
};

Must be in place as the parent of the whole calendar component.

import { DatePickerProvider } from "headless-react-datepicker";

"gregory" | "persian" | "islamic" | "islamic-umalqura" | "islamic-tbla" | "islamic-civil" | "islamic-rgsa" | "iso8601" | "japanese" | "islamicc" | "roc" | "chinese" | "indian" | "buddhist" | "coptic" | "dangi" | "ethioaa" | "ethiopic" | "hebrew"

The Title component is used to display the month and year based on the selected locale and calendar.

import { Title } from "headless-react-datepicker";

The Header component is used to navigate to the next and previous month and select month and year from the drop-down list.

You can customize arrow icons with React Node and the dropdowns with className and CSS stylesheets.

import { Header } from "headless-react-datepicker";

The WeekDays component is used to display the weekday header.

import { WeekDays } from "headless-react-datepicker";

The DaySlots component is used to display the month and year based on the selected locale and calendar.

import { DaySlots } from "headless-react-datepicker";

You can access almost all props and functions of the date picker from the date picker context, so you can customize and build your own custom component easily.

import { useDatePickerContext } from "headless-react-datepicker";

const MyCustomAwesomeHeader = () => {
  const { goToCurrentMonth, yearInTheCalendar } = useDatePickerContext();

  return <div onClick={goToCurrentMonth}>{yearInTheCalendar}</div>;
};

Using the Intl API which is ECMAScript Internationalization API with a very good browser support and depends on Temporal for converting other calendars into gregory.

• [x] remove dependency to date-fns
• [ ] time picker
• [ ] rangle picker hover effect
• [ ] integrate popover for whole calendar
• [ ] two side by side calendar

MIT @ Sepehr09

We're eagerly welcoming to contributors who want to help build and maintain this repo. PRs are always welcome!

you can see the change log here