کامپوننت Date Picker حرفهای برای React با نمایش جلالی و ذخیرهسازی گرگوری
Production-ready Persian (Jalali) date pickers for React with support for single, range, multiple selection and time picker. تمام مقادیر به صورت Date (گرگوری) مدیریت میشوند. جلالی فقط برای نمایش و ورودی کاربر استفاده میشود.
هر چیزی که برای کار با تاریخ جلالی در React نیاز داری، از قبل برایت آماده شده است.
تمام مقادیر به صورت Date (گرگوری) مدیریت میشوند. جلالی فقط برای نمایش و ورودی کاربر استفاده میشود.
شما مالک state هستید. کامپوننتها controlled هستند و با value و onChange کار میکنند.
پشتیبانی از انتخاب یک تاریخ یا بازه زمانی با کامپوننتهای جداگانه PersianDatePicker و PersianDateRangePicker.
امکان انتخاب زمان به همراه تاریخ با قابلیت تنظیم ساعت، دقیقه و ثانیه.
قابلیت انتخاب چندین تاریخ در یک کامپوننت با محدودیت تعداد انتخابات.
دو حالت نمایش: inline (همیشه باز) و popover (با input و باز شدن با کلیک).
اداپتر آماده برای اتصال به React Hook Form بدون نیاز به کد اضافی.
استایلدهی کامل با CSS variables و classes prop برای کنترل کامل بر ظاهر.
شروع سریع با چند خط کد
سپس استایلهای پیشفرض را import کنید (اختیاری):
تمام کامپوننتها به صورت واقعی و قابل تعامل هستند
انتخاب یک تاریخ با نمایش جلالی و ذخیرهسازی گرگوری
انواع مختلف استفاده از کامپوننتها
انتخاب یک تاریخ با نمایش جلالی و ذخیرهسازی گرگوری
تمام props و تنظیمات قابل استفاده
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | Date[] | — | مقدار کنترل شده (گرگوری) |
| onChange | (date: Date | null | Date[]) => void | — | تابع callback برای تغییر مقدار |
| placeholder | string | undefined | Placeholder برای input (حالت popover) |
| multiple | boolean | false | فعالسازی انتخاب چندتایی |
| maxSelections | number | undefined | حداکثر تعداد انتخابات (فقط با multiple=true) |
| timePicker | TimePickerConfig | boolean | undefined | فعالسازی time picker |
| mode | 'popover' | 'inline' | 'popover' | حالت نمایش: popover یا inline |
| minDate | Date | undefined | حداقل تاریخ قابل انتخاب (گرگوری) |
| maxDate | Date | undefined | حداکثر تاریخ قابل انتخاب (گرگوری) |
| theme | 'light' | 'dark' | 'auto' | 'light' | تم استایلهای پیشفرض |
| monthLabels | string[] | numeric | برچسبهای 12 ماه (index 0 => ماه 1) |
| weekdays | string[] | numeric | برچسبهای 7 روز هفته |
| classes | PersianDatePickerClasses | undefined | کلاسهای سفارشی برای هر بخش |
شخصیسازی ظاهر با CSS variables و classes
| Variable | Purpose | Default |
|---|---|---|
| --dvx-pdp-bg | پسزمینه سطح | #ffffff |
| --dvx-pdp-fg | متن اصلی | #111827 |
| --dvx-pdp-muted | متن muted | #6b7280 |
| --dvx-pdp-border | حاشیهها | #e5e7eb |
| --dvx-pdp-shadow | سایه popover | 0 10px 20px rgba(0, 0, 0, 0.08) |
| --dvx-pdp-accent | رنگ accent / انتخاب شده | #2563eb |
| --dvx-pdp-accentFg | متن روی accent | #ffffff |
| --dvx-pdp-ring | حلقه focus | rgba(37, 99, 235, 0.3) |
| --dvx-pdp-dayHover | پسزمینه hover | rgba(37, 99, 235, 0.08) |
با استفاده از Persian Date Kit، بهجای ساخت از صفر، روی ویژگیهای منحصربهفرد محصولت تمرکز میکنی و زمان توسعه را کوتاهتر میکنی.