@zorvx/antd-persian-date-picker

Persian (Jalali / Shamsi) date picker for Ant Design. A drop-in replacement for Ant Design's DatePicker and RangePicker, powered by date-fns-jalali.

Works with the same props and behavior as the official Ant Design DatePicker — but displays and parses dates in the Persian calendar.

Repository: github.com/AliNAbadian/antd-range-picker

Features

• Persian (Jalali) calendar support out of the box
• Drop-in replacement for DatePicker and RangePicker
• Full Ant Design DatePicker API (format, disabledDate, showTime, picker="month", etc.)
• TypeScript support included
• ESM and CommonJS builds
• Optional isolated Jalali dayjs helper (subpath export)

Dependencies

Required in your project (peer dependencies)

These must be installed in the consuming app:

| Package | Version | Why | | ----------- | ---------- | ------------------------------------ | | react | >=18.0.0 | React runtime | | react-dom | >=18.0.0 | React DOM | | antd | >=5.0.0 | UI components (generatePicker API) |

Bundled with this package

| Package | Version | Why | | ----------------- | ---------- | ------------------------------------ | | date-fns-jalali | ^4.4.0-0 | Jalali calendar logic for the picker |

Optional (only for /jalali-dayjs subpath)

| Package | Version | Why | | ----------- | --------- | ------------------------------ | | dayjs | ^1.11.0 | Isolated Jalali dayjs instance | | jalaliday | ^3.0.0 | Jalali plugin for dayjs |

Installation

Main package

npm install @zorvx/antd-persian-date-picker antd react react-dom

pnpm add @zorvx/antd-persian-date-picker antd react react-dom

yarn add @zorvx/antd-persian-date-picker antd react react-dom

With optional dayjs helper

npm install @zorvx/antd-persian-date-picker antd react react-dom dayjs jalaliday

Quick start

Import Ant Design styles once in your app entry (e.g. main.tsx or _app.tsx):

import "antd/dist/reset.css";

Use the picker:

import { useState } from "react";
import PersianDatePicker, {
  PersianRangePicker,
} from "@zorvx/antd-persian-date-picker";

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

  return (
    <>
      <PersianDatePicker
        value={date}
        onChange={setDate}
        placeholder="انتخاب تاریخ"
      />

      <PersianRangePicker placeholder={["از", "تا"]} />
    </>
  );
}

Exports

Main entry — @zorvx/antd-persian-date-picker

| Export | Type | Description | | ---------------------- | --------- | ---------------------------------------------- | | PersianDatePicker | Component | Default export — Jalali DatePicker | | PersianRangePicker | Component | Jalali date range picker | | generateJalaliConfig | Config | Low-level calendar config for generatePicker | | formatDateMMDDYYYY | Function | Formats a Date as YYYY-M-D string |

Subpath — @zorvx/antd-persian-date-picker/jalali-dayjs

| Export | Type | Description | | ------------- | -------- | ------------------------------------------------------------ | | jalaliDayjs | Function | Pre-configured Jalali dayjs (does not affect global dayjs) | | Dayjs | Type | dayjs instance type |

Usage examples

Single date picker

import PersianDatePicker from "@zorvx/antd-persian-date-picker";

<PersianDatePicker
  format="YYYY/MM/DD"
  placeholder="انتخاب تاریخ"
  onChange={(date) => console.log(date)}
/>;

Range picker

import { PersianRangePicker } from "@zorvx/antd-persian-date-picker";

<PersianRangePicker
  placeholder={["تاریخ شروع", "تاریخ پایان"]}
  onChange={(dates) => console.log(dates)}
/>;

With time picker

<PersianDatePicker showTime format="YYYY/MM/DD HH:mm" />

Month / year picker

<PersianDatePicker picker="month" placeholder="انتخاب ماه" />
<PersianDatePicker picker="year" placeholder="انتخاب سال" />

Disable specific dates

<PersianDatePicker
  disabledDate={(current) => {
    // disable weekends (example)
    return current.getDay() === 5; // Friday in Jalali week config
  }}
/>

Inside Ant Design Form

import { Form } from "antd";
import PersianDatePicker from "@zorvx/antd-persian-date-picker";

<Form>
  <Form.Item name="birthDate" label="تاریخ تولد">
    <PersianDatePicker style={{ width: "100%" }} />
  </Form.Item>
</Form>;

Utility: format date string

import { formatDateMMDDYYYY } from "@zorvx/antd-persian-date-picker";

const formatted = formatDateMMDDYYYY(new Date());
// e.g. "2026-6-28"

Optional: isolated Jalali dayjs

Use this when you need Jalali date formatting outside the picker, without polluting your app's global dayjs config:

import { jalaliDayjs } from "@zorvx/antd-persian-date-picker/jalali-dayjs";

const today = jalaliDayjs().format("YYYY/MM/DD");
const parsed = jalaliDayjs("1403/01/15", "YYYY/MM/DD");

Requires dayjs and jalaliday to be installed in your project.

API

PersianDatePicker and PersianRangePicker accept the same props as Ant Design's DatePicker and RangePicker.

Common props:

| Prop | Type | Description | | -------------- | ---------------------------------------------------- | ------------------------------- | | value | Date \| null | Controlled value | | onChange | (date, dateString) => void | Change handler | | format | string | Display format (default Jalali) | | placeholder | string \| [string, string] | Input placeholder(s) | | disabled | boolean | Disable the input | | disabledDate | (date: Date) => boolean | Disable specific dates | | showTime | boolean \| object | Enable time selection | | picker | "date" \| "week" \| "month" \| "quarter" \| "year" | Picker mode |

Support this project

If this package saves you time or fits your project, a GitHub star is a small gesture that helps a lot — it makes the repo easier for others to find and encourages ongoing maintenance.

⭐ Star on GitHub

Found a bug or have an idea? Open an issue — feedback is always welcome.

License

MIT