Skip to main content

React Date Picker

npm version npm downloads bundle size license

🤔 Why To Use It?​

A modern, fully customizable React Date Picker component with support for both Gregorian and Hijri calendars. It provides multiple views (day, month, year), works in inline or popover mode, supports localization (i18n), and allows complete theming via SCSS variables or CSS custom properties.

Whether you’re building a simple form date field or a complex internationalized app, this library gives you full control over how dates are displayed, selected, highlighted, and styled.

✨ Features​

  • 🔥 Flexible & Customizable Components - Easily tailor every part of the UI using render props, overrides, and CSS variables. You control the logic, layout, and styling—no rigid patterns, just full flexibility.

  • 🕌 Dual Calendar Support - Built-in support for both Gregorian and Hijri (Islamic) calendars.

  • 🌍 Internationalization (i18n) - Localize month names, weekdays, and calendar layout using moment.js locales.
    Supports RTL (Right-to-Left) and LTR directions.

  • 🎨 Theming & Customization - Supporting light & dark modes. Customize colors customize using SCSS or CSS variables without modifying the source code.

  • 📐 Flexible Positioning - Choose from multiple popover positions (top, bottom, start, end, etc.) with automatic viewport adjustments.

  • 📅 Multiple Calendar Views - Switch easily between Day, Month, and Year views with a single prop.

  • 📌 Inline or Popover - modes (attach to an input field)

  • 🚀 Lightweight & Performant - Optimized with React hooks (useMemo, useEffect) and minimal dependencies.

  • 🕒 Date & Time Picker Support - Combine calendar and time picker for full datetime selection.

  • 🔒 Disable Dates - Provide a custom function or array of dates to disable specific days, months, or years.

  • 📆 First Day of Week - Configure which day your calendar starts on (Sunday, Monday, etc.).

  • 🔢 Week Numbers - Optionally display ISO week numbers for better planning.

  • 🖼 Inline or Popover Mode - Use the calendar embedded in your layout or as a dropdown attached to an input field.

  • ⚡ Simple API - Minimal props with sensible defaults, but flexible enough for advanced use cases.

  • 🛠️ Written in TypeScript with full typings