Headless React Date Picker

A headless React date picker library for easily integrating date selection into your web applications. This library provides a flexible and highly customizable date picker, giving you complete control over the presentation and interaction with the .

Features

• Headless: The library is designed to be headless, meaning you have full control over the rendering, styling, and behavior of the date picker.
• Highly Customizable: Customize the appearance, style, and behavior to seamlessly integrate with your project's design.
• Internationalization: Supports multiple languages and date formats (powered by DayJS).
• Lightweight: A small and efficient library with two runtime dependencies:
  • React (obviously) version ^18
  • DayJS

Docs

You can find the docs with reference and better examples at https://date-picker.zuruh.dev

Quick Start

Installation

As said above, this lib requires both react and dayjs.

npm i @zuruuh/react-date-picker dayjs react

We also need some specific dayjs plugin, which you can enable by copy/pasting this

Simple example

import { DatePicker } from "@zuruuh/react-date-picker";
//...
const [selectDate, setSelectedDate] = useState<Dayjs | null>(null);

return (
  <DatePicker.Root selectedDate={date} setSelectedDate={setDate}>
    <DatePicker.Calendar>
      <DatePicker.Week>
        <DatePicker.Day>
          {({ date, onClick }) => (
            <button onClick={onClick}>{date.date()}</button>
          )}
        </DatePicker.Day>
      </DatePicker.Week>
    </DatePicker.Calendar>
  </DatePicker.Root>
);

The above example will generate a flat calendar with no markup other than the buttons. You can customize the markup and styling by adding your own jsx to the example wherever you need it

Contribution

Check the contribution guidelines to contribute to this library.

Special thanks

• Twemoji for the great SVGs
• The DayJS team for their awesome library