Persian Date Picker

A beautiful Persian (Jalali) date picker component built on top of shadcn UI. This component provides a fully functional calendar interface with RTL (right-to-left) support for Persian language.

Features

• 📅 Persian (Jalali) calendar support
• 🎨 Built on shadcn UI components
• 🌐 RTL (right-to-left) layout support
• 📱 Responsive design
• ⚡ TypeScript support
• 🎯 Accessible and keyboard-friendly

Installation

npm install @whitediv/persian-date-picker

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

npm install react react-dom @radix-ui/react-popover @radix-ui/react-slot lucide-react jalaali-js clsx tailwind-merge class-variance-authority

Tailwind CSS Setup

This component uses Tailwind CSS for styling. You need to configure Tailwind in your project with the following:

1. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@whitediv/persian-date-picker/**/*.{js,ts,jsx,tsx}", // Add this
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

3. Install Tailwind Animate Plugin

npm install -D tailwindcss-animate

4. Add CSS Variables to your global CSS

Add these CSS variables to your global CSS file (e.g., globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

Usage

Basic Example

import { JalaliDatePicker, JalaaliDate } from "@whitediv/persian-date-picker";
import { useState } from "react";

function App() {
  const [selectedDate, setSelectedDate] = useState<JalaaliDate | undefined>();

  return (
    <JalaliDatePicker
      selectedDate={selectedDate}
      onSelectDate={setSelectedDate}
    >
      <button className="px-4 py-2 border rounded">
        {selectedDate
          ? `${selectedDate.jy}/${selectedDate.jm}/${selectedDate.jd}`
          : "Select Date"}
      </button>
    </JalaliDatePicker>
  );
}

With Custom Trigger

import { JalaliDatePicker, JalaaliDate } from "@whitediv/persian-date-picker";
import { useState } from "react";
import jalaali from "jalaali-js";

function App() {
  const [selectedDate, setSelectedDate] = useState<JalaaliDate | undefined>();

  const formatDate = (date: JalaaliDate) => {
    const monthNames = [
      "فروردین",
      "اردیبهشت",
      "خرداد",
      "تیر",
      "مرداد",
      "شهریور",
      "مهر",
      "آبان",
      "آذر",
      "دی",
      "بهمن",
      "اسفند",
    ];
    return `${date.jd} ${monthNames[date.jm - 1]} ${date.jy}`;
  };

  return (
    <JalaliDatePicker
      selectedDate={selectedDate}
      onSelectDate={setSelectedDate}
    >
      <div className="cursor-pointer p-4 border rounded-lg hover:bg-accent">
        {selectedDate ? formatDate(selectedDate) : "انتخاب تاریخ"}
      </div>
    </JalaliDatePicker>
  );
}

API Reference

JalaliDatePicker

The main date picker component.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | selectedDate | JalaaliDate \| undefined | Yes | The currently selected Jalali date | | onSelectDate | (date: JalaaliDate) => void | Yes | Callback function called when a date is selected | | children | React.ReactNode | Yes | The trigger element that opens the date picker |

JalaaliDate

Type representing a Jalali (Persian) date.

type JalaaliDate = {
  jy: number; // Jalali year
  jm: number; // Jalali month (1-12)
  jd: number; // Jalali day (1-31)
};

Converting Between Jalali and Gregorian Dates

You can use the jalaali-js library (already a peer dependency) to convert between Jalali and Gregorian dates:

import jalaali from "jalaali-js";

// Convert Gregorian to Jalali
const gregorianDate = new Date(2024, 2, 20); // March 20, 2024
const jalaliDate = jalaali.toJalaali(gregorianDate);
// { jy: 1403, jm: 1, jd: 1 }

// Convert Jalali to Gregorian
const jalaliDate = { jy: 1403, jm: 1, jd: 1 };
const gregorianDate = jalaali.toGregorian(jalaliDate.jy, jalaliDate.jm, jalaliDate.jd);
// { gy: 2024, gm: 3, gd: 20 }

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.