Persian Date Kit
Date Picker شمسی جلالی برای React
کامپوننت Date Picker حرفهای با نمایش جلالی و ذخیرهسازی گرگوری. پشتیبانی از انتخاب تکی، بازه، چندتایی و Time Picker.
ویژگیهای کلیدی
هر چیزی که برای کار با تاریخ جلالی در React نیاز داری.
نمایش جلالی، ذخیره گرگوری
تمام مقادیر به صورت Date (گرگوری) مدیریت میشوند. جلالی فقط برای نمایش و ورودی کاربر استفاده میشود.
کامپوننتهای کنترل شده
شما مالک state هستید. کامپوننتها controlled هستند و با value و onChange کار میکنند.
انتخاب تکی و بازه
پشتیبانی از انتخاب یک تاریخ یا بازه زمانی با کامپوننتهای جداگانه PersianDatePicker و PersianDateRangePicker.
Time Picker
امکان انتخاب زمان به همراه تاریخ با قابلیت تنظیم ساعت، دقیقه و ثانیه.
انتخاب چندتایی
قابلیت انتخاب چندین تاریخ در یک کامپوننت با محدودیت تعداد انتخابات.
Inline و Popover
دو حالت نمایش: inline (همیشه باز) و popover (با input و باز شدن با کلیک).
React Hook Form
اداپتر آماده برای اتصال به React Hook Form بدون نیاز به کد اضافی.
قابل سفارشیسازی
استایلدهی کامل با CSS variables و classes prop برای کنترل کامل بر ظاهر.
نصب و راهاندازی
شروع سریع با چند خط کد
npm install persian-date-kitسپس استایلهای پیشفرض را import کنید:
import 'persian-date-kit/styles.css'نمونههای لایو
تمام کامپوننتها به صورت واقعی و قابل تعامل هستند
Single Date Picker
انتخاب یک تاریخ با نمایش جلالی و ذخیرهسازی گرگوری
ISO String: 2026-06-15T09:40:01.692Z
مثالهای استفاده
انواع مختلف استفاده از کامپوننتها
Single Date Picker
انتخاب یک تاریخ با نمایش جلالی و ذخیرهسازی گرگوری
import { useState } from 'react'
import { PersianDatePicker } from 'persian-date-kit'
import 'persian-date-kit/styles.css'
const monthLabels = [
'فروردین', 'اردیبهشت', 'خرداد', 'تیر',
'مرداد', 'شهریور', 'مهر', 'آبان',
'آذر', 'دی', 'بهمن', 'اسفند',
]
export function Example() {
const [value, setValue] = useState<Date | null>(new Date())
return (
<PersianDatePicker
value={value}
onChange={setValue}
placeholder="YYYY/MM/DD"
monthLabels={monthLabels}
weekdays={['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']}
minDate={new Date(2020, 0, 1)}
maxDate={new Date(2030, 11, 31)}
/>
)
}مستندات Props
تمام 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) |
Theme با CSS Variables
/* Theme via CSS variables */
.myPicker {
--dvx-pdp-accent: #16a34a;
--dvx-pdp-ring: rgba(22, 163, 74, 0.25);
}
<PersianDatePicker
className="myPicker"
theme="light"
value={value}
onChange={setValue}
/>Override با Classes
/* Override per-slot classes */
<PersianDatePicker
value={value}
onChange={setValue}
classes={{
input: 'w-full rounded-xl border border-slate-300 bg-white px-3 py-2',
popover: 'z-[9999]',
daySelected: '!bg-emerald-600 !text-white',
}}
/>آمادهای شروع کنی؟
با Persian Date Kit روی ویژگیهای منحصربهفرد محصولت تمرکز کن و زمان توسعه را کوتاهتر کن.