🇮🇷 Irani Calendar

یک کامپوننت تقویم ایرانی (شمسی/جلالی) زیبا، سبک و قابل تنظیم برای React.

📸 Screenshots

🚀 نصب

npm install irani-calendar

یا:

yarn add irani-calendar

📦 استفاده

import React, { useState } from 'react';
import IraniCalendar from 'irani-calendar';
import 'irani-calendar/src/JalaliDatePicker.css';

function App() {
  const [selectedDate, setSelectedDate] = useState('');

  const handleDateChange = (date) => {
    setSelectedDate(date);
    console.log('تاریخ انتخاب شده:', date);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '300px' }}>
      <IraniCalendar
        value={selectedDate}
        onChange={handleDateChange}
        placeholder="تاریخ را انتخاب کنید"
        outputFormat="jalali"
      />
    </div>
  );
}

export default App;

✨ ویژگی‌ها

• 📅 نمایش تقویم شمسی ایرانی
• 🎨 طراحی مدرن و واکنش‌گرا
• ⚡ عملکرد سریع و بهینه
• 🛠 قابل تنظیم و توسعه‌پذیر
• 📱 مناسب برای موبایل
• 🌙 پشتیبانی از محدودیت تاریخ
• 🔄 تبدیل خودکار بین تقویم‌ها

📚 مستندات

Props

| Prop | Type | Default | توضیح | |------------------|----------|------------------|-------| | value | string | "" | تاریخ انتخاب شده | | onChange | function | required | تابعی که هنگام تغییر تاریخ اجرا می‌شود | | placeholder | string | "انتخاب تاریخ" | متن placeholder | | className | string | "" | کلاس اضافه برای CSS | | disabled | boolean | false | غیرفعال بودن پیکر | | minDate | string | null | حداقل تاریخ (مثال: 1402/01/01) | | maxDate | string | null | حداکثر تاریخ (مثال: 1402/12/29) | | showTodayButton | boolean | true | نمایش دکمه «امروز» | | showClearButton | boolean | true | نمایش دکمه پاک کردن | | outputFormat | string | "jalali" | خروجی تاریخ (jalali یا gregorian) |

📅 فرمت تاریخ

• شمسی: 1402/01/15
• میلادی: 2023-04-04

🎯 مثال‌های پیشرفته

// با محدودیت تاریخ
<IraniCalendar
  value={selectedDate}
  onChange={setSelectedDate}
  minDate="1402/01/01"
  maxDate="1402/12/29"
  placeholder="بین 1402/01/01 تا 1402/12/29 انتخاب کنید"
/>

// غیرفعال
<IraniCalendar
  value={selectedDate}
  onChange={setSelectedDate}
  disabled={true}
/>

// خروجی میلادی
<IraniCalendar
  value={selectedDate}
  onChange={setSelectedDate}
  outputFormat="gregorian"
/>

// بدون دکمه امروز و پاک کردن
<IraniCalendar
  value={selectedDate}
  onChange={setSelectedDate}
  showTodayButton={false}
  showClearButton={false}
/>

🛠 توسعه

# کلون کردن ریپازیتوری
git clone https://github.com/mahdiAsadollahi/irani-calendar.git
cd irani-calendar

# نصب وابستگی‌ها
npm install

# تست محلی
npm pack

🤝 مشارکت

اگر می‌خواهید در توسعه این پروژه مشارکت کنید:

1. ریپازیتوری را fork کنید
2. یک branch جدید بسازید:
   git checkout -b feature/amazing-feature
3. تغییرات را commit کنید:
   git commit -m "Add some amazing feature"
4. به branch خود push کنید:
   git push origin feature/amazing-feature
5. Pull Request ثبت کنید

🐞 گزارش مشکل

اگر مشکلی وجود دارد، لطفاً در بخش Issues گزارش دهید.

📄 مجوز

این پروژه تحت مجوز MIT منتشر شده است.

⭐ حمایت

اگر این پکیج برای شما مفید بود، با ⭐ زدن از آن حمایت کنید!