تقویم جلالی خالص با معماری Headless، سه تم زیبا، انتخاب بازهای، ماسک ورودی هوشمند و بدون هیچ وابستگی خارجی.
معماری Headless، عملکرد بالا و سازگاری کامل با هر فریمورکی
صفر وابستگی خارجی. الگوریتمهای تبدیل تاریخ جلالی ↔ میلادی کاملاً خالص و دقیق بدون نیاز به moment.js یا هیچ کتابخانه دیگر.
موتور محاسباتی PardisEngine از رابط کاربری جداست. آزادی کامل برای ساخت UI سفارشی با حفظ منطق تاریخ شمسی.
قابلیت Range Selection با هاور هوشمند، انتخاب شروع و پایان، و تشخیص خودکار ترتیب تاریخها.
تم مدرن (Clean)، شیشهای (Glassmorphism)، و کلاسیک (Dark Admin) — قابل سفارشیسازی با CSS Variables.
تایپ تاریخ با ماسک خودکار اعداد فارسی، جداکننده خودکار «/»، و پشتیبانی از inputmode="numeric" برای موبایل.
حالت موبایل با Bottom Sheet، پشتیبانی از Touch Events، و سازگاری کامل با همه اندازههای صفحه.
هر تم با CSS Variables کاملاً قابل سفارشیسازی است
فقط یک فایل JS و یک فایل CSS اضافه کنید. بدون build step، بدون bundler، بدون پیکربندی پیچیده.
// 1. Popover mode — bind to input const dp = new PardisDatepicker('#myInput', { outputFormat: 'both', onChange: (payload) => { payload.jalali.formatted // '1404/01/01' payload.gregorian.formatted // '2025-03-21' payload.timestamp // unix ms } }); // 2. Inline + Range mode const range = new PardisDatepicker('#myDiv', { inline: true, rangeMode: true, onRangeSelect: ({ start, end }) => { console.log(start, end); } }); // 3. Set limits & navigate dp.setOption('minDate', { jy: 1403, jm: 1, jd: 1 }); dp.setValue(1404, 6, 15); dp.clear();
همه optionها، متدها و ساختار خروجی
| Option | Type | Default | Description |
|---|---|---|---|
| inline | boolean | false | نمایش همیشگی بدون input |
| rangeMode | boolean | false | حالت انتخاب بازه |
| outputFormat | 'both' | 'jalali' | 'gregorian' | 'both' | فرمت خروجی payload |
| initialYear | number | امسال | سال اولیه نمایش تقویم |
| initialMonth | number | این ماه | ماه اولیه نمایش تقویم |
| minDate | {jy, jm, jd} | null | کمترین تاریخ قابل انتخاب |
| maxDate | {jy, jm, jd} | null | بیشترین تاریخ قابل انتخاب |
| onChange | function | null | Callback هنگام انتخاب تاریخ |
| onRangeStart | function | null | Callback شروع انتخاب بازه |
| onRangeSelect | function | null | Callback تکمیل انتخاب بازه |
| onClear | function | null | Callback پاک کردن انتخاب |
| Method | Return | Description |
|---|---|---|
| open() | void | باز کردن popover تقویم |
| close() | void | بستن popover تقویم |
| getValue() | payload | null | دریافت آخرین تاریخ انتخابشده |
| setValue(jy, jm, jd) | void | انتخاب تاریخ به صورت برنامهنویسی |
| clear() | void | پاک کردن انتخاب فعلی |
| setOption(key, value) | void | تغییر option پس از ساخت instance |
| destroy() | void | حذف کامل instance و event listeners |
{
jalali: {
year: 1404,
month: 1,
day: 1,
monthName: 'فروردین',
formatted: '1404/01/01',
formattedPersian: '۱۴۰۴/۰۱/۰۱',
timestamp: 1742515200000
},
gregorian: {
year: 2025,
month: 3,
day: 21,
monthName: 'March',
formatted: '2025-03-21',
date: Date,
timestamp: 1742515200000
},
iso: '2025-03-21',
timestamp: 1742515200000
}
// Direct engine access dp.engine.goToNextMonth() dp.engine.goToPrevMonth() dp.engine.goToNextYear() dp.engine.goToPrevYear() dp.engine.goToToday() dp.engine.setViewMode('month') // Listen to view changes dp.engine.on('viewChange', (info) => { info.year info.month info.monthName info.viewMode }) // Static date conversion const p = PardisEngine.buildDatePayload( 1404, 1, 1, 'both' );
در کمتر از یک دقیقه تقویم شمسی حرفهای را به پروژه خود اضافه کنید.