@zuruuh/react-date-picker NPM

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