React Date Picker

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.

Check out the Documentation or try it in the Live Demo

✨ 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

📦 Installation

You can install @fk6/react-datepicker using your favorite package manager:

# Using npm
npm install @fk6/react-datepicker moment moment-hijri

# Using yarn
yarn add @fk6/react-datepicker moment moment-hijri

# Using pnpm
pnpm add @fk6/react-datepicker moment moment-hijri

Peer Dependencies

This package relies on:

• React +18
• moment (for Gregorian calendar support)
• moment-hijri (for Hijri calendar support)

Make sure these are installed in your project.

🚀 Usage

Basic Example

import React, { useState } from "react";
import { DatePicker, DateTimePicker } from "react-date-picker";
import "@fk6/react-datepicker/react-datepicker.css";

export default function App() {
  const [date, setDate] = useState<Date | Moment | null>(null);

  return (
    <div>
      <DatePicker value={date} onChange={setDate} />
      <DateTimePicker value={date} onChange={setDate} />
    </div>
  );
}

Hijri Calendar

Switch to Hijri mode using calendar prop:

<DatePicker calendar="hijri" />

Inline Mode

Render Calendar without field:

import React, { useRef, useState } from "react";
import { Calendar } from "@fk6/react-datepicker";
import moment from "moment";

export default function App() {
  const [value, setValue] = useState(moment());
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <Calendar mode="inline" value={value} onChange={setValue} />
    </div>
  );
}

Localization

This example sets the Moment.js locale to Arabic ("ar") and renders a DatePicker with Arabic localization. It ensures that date formats, calendar labels, and UI elements appear in Arabic, providing a fully localized experience for Arabic-speaking users.

import { useState } from "react";
import { DatePicker } from "@fk6/react-datepicker";

import "@fk6/react-datepicker/react-datepicker.css";
import "moment/locale/ar";

const Example = () => {
  return <DatePicker locale="ar" />;
};

Render Custom Field

Render your own Custom Input:

This DatePicker allow you to render your own custom input component (MyCustomInput) to render the date field. The ref connects the input to the calendar popover, while onOpenRequest enables the calendar to open on click—providing seamless integration between the input field and date selection UI.

<DatePicker
  renderInput={(dateFieldProps) => (
    <MyCustomInput
      readOnly
      ref={dateFieldProps.ref}
      value={dateFieldProps.value}
      onClick={dateFieldProps.onOpenRequest}
    />
  )}
/>

Customize Cells

You can customize how individual cells are rendered in the date and time picker using render props like renderDay, renderMonth, renderYear or renderTimeItem and more. Each render function receives useful context including the formatted renderedValue, the associated date, a props object containing default HTML attributes like className, style, and event handlers, and a state object with metadata such as selected, disabled, focused, etc... This allows you to return custom JSX while preserving or extending the default behavior and styling—perfect for adding icons, conditional formatting, tooltips, or fully personalized UI elements, making it easy to tailor the picker to your design needs. There's an example for customizing days, months, years, time cells

<DateTimePicker
  calendarProps={{
    daysCalendarProps: {
      renderDay: (renderedValue, date, props, state) => (
        <div {...props}>
          {state.selected ? "#" : "*"}
          {renderedValue}
        </div>
      ),
    },
    monthsCalendarProps: {
      renderMonth: (renderedValue, date, props, state) => (
        <div {...props}>
          {state.selected ? "# " : "* "}
          {renderedValue}
          {state.selected ? " #" : " *"}
        </div>
      ),
    },
    yearsCalendarProps: {
      renderYear: (renderedValue, date, props, state) => (
        <div {...props}>
          {state.selected ? ". " : "- "}
          {renderedValue}
          {state.selected ? " ." : " -"}
        </div>
      ),
    },
    timePickerProps: {
      visibleColumns: ["hours"],
      renderTimeItem: (renderedValue, date, props, state) => (
        <div {...props}>{renderedValue}:00</div>
      ),
    },
  }}
/>

Theming

You can override CSS variables in your styles:

:root {
  --fkdp-primary: #4caf50;
  --fkdp-secondary: #977e7e;
  --fkdp-highlight: #5da064cd;
  --fkdp-text: #000000ff;
  --fkdp-light-text: #c6c6c6ff;

  // DateField
  --fkdp-field-bg: #c2e2d0ff;
  --fkdp-field-color: #222;
  --fkdp-field-icon-color: #222;

  // Calendar
  --fkdp-calendar-bg: #c2e2d0ff;
  --fkdp-calendar-highlighted-bg: #459588cd;
  --fkdp-calendar-holiday-bg: #5a3434ff;
}

⚙️ Props

Common Props (Date & Date-Time Picker)

Calendar Props

Common Props

Days Calendar Props

Months Calendar Props

Years Calendar Props

Time Picker Props

Field Props

🤝 Contributing

I welcome contributions to make this datepicker even better! Whether you're fixing bugs, adding features, improving documentation, or suggesting enhancements—your input matters.

How to Contribute

1. Fork the repository
2. Create a new branch

git checkout -b feature/your-feature-name

1. Make your changes
2. Test your code
3. • Submit a pull request with a clear description of your changes

Guidelines

• Follow the existing code style and structure
• Write clear, concise commit messages
• Include relevant tests for new features or bug fixes
• Keep PRs focused—one feature or fix per PR

If you're unsure where to start, check out the issues tab for open tasks or feature requests.

License

MIT © Fadi Krdiyeh ↗️. Licensed under MIT license, see LICENSE for the full license.

Don't be shy to visit my Portfolio 😇🤍