Jalali-persian-datepicker NPM

Jalali Persian DatePicker

A customizable Jalali (Persian) date picker component for React and Next.js, allowing users to easily select dates in the Jalali calendar. This package leverages jalaali-js for Jalali date conversion and @radix-ui/react-popover for the date picker UI, while letting users install external dependencies themselves for flexibility.

!TIP This package works best with Shadcn/ui if you installed that you don't need to install anything except jalaali-js and popover from Shadcn/ui

Demo

Demo Picture

Features

Jalali (Persian) calendar functionality.
Designed for use with React and Next.js.
Fully customizable and easy to integrate.
External dependencies are lightweight and user-managed.
Allows flexible usage with UI libraries like Radix and Shadcn/UI.

Installation

To use this package, you’ll need to install both the Jalali Persian DatePicker and its peer dependencies.

Step 1: Install the Package

npm install jalali-persian-datepicker jalaali-js

Step 2: Install Peer Dependencies

npm install @radix-ui/react-popover lucide-react

Usage

Here’s a basic example of how to use the Jalali Persian DatePicker component in a React or Next.js project:

Example

import React, { useState } from "react";
import { JalaliPersianDatePicker } from "jalali-persian-datepicker";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@radix-ui/react-popover";
import { Button } from "shadcn/ui";

const MyComponent = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div>
      <JalaliPersianDatePicker
        selected={selectedDate}
        onSelect={(date) => setSelectedDate(date)}
      />
    </div>
  );
};

export default MyComponent;

Available Props

Prop	Type	Description
`selected`	`JalaaliDate` \| `undefined`	The currently selected date in the Jalali calendar. Format: `{ jy, jm, jd }`
`onSelect`	`(date: JalaaliDate) => void`	Callback triggered when a user selects a date. Returns the selected Jalali date.