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 .
- 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
You can find the docs with reference and better examples at https://date-picker.zuruh.dev
As said above, this lib requires both react and dayjs.
npm i @zuruuh/react-date-picker dayjs reactWe also need some specific dayjs plugin, which you can enable by copy/pasting this
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
Check the contribution guidelines to contribute to this library.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent