تقویم (Calendar)
کامپوننت تقویم برای دستهبندی محتوا با یک کلمه کلیدی استفاده میشود.
پایه (Basic)
استفاده پایه از تقویم.
| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
محدوده (Range)
تقویم محدوده رفتار مشابهی با تقویم دارد، اما قادر به انتخاب تاریخ شروع و پایان است.
| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
رندر سفارشی (Custom render)
شما میتوانید المانهای روز سفارشی رندر کنید یا استایلها و کلاسها را با این ویژگیها
dayStyle، dayClassName و renderDay به روزها اعمال کنید.| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
تاریخهای غیرفعال مشخص (Disabled certain date)
قسمتهایی از تاریخها را با استفاده از ویژگی
disabledDate غیرفعال کنید.| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
تاریخهای غیرفعال خارج از دوره (Disable out of period date)
با تنظیم ویژگیهای
minDate و maxDate، تاریخهای قابل دسترس را در یک دوره محدود کنید.| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
نمای چندتایی تاریخ (Multiple date view)
تقویم یا تقویم محدوده میتواند نمای چندتایی تاریخ داشته باشد با تنظیم ویژگی
dateViewCount بیشتر از 1.| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
انتخاب چندگانه (Multiple selection)
کامپوننت تقویم اجازه میدهد تاریخهای متعدد را با تنظیم ویژگی
multipleSelection انتخاب کنید.| ش | ی | د | س | چ | پ | ج |
|---|---|---|---|---|---|---|
API
تقویم (Calendar)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| dateViewCount | تعداد نمایش تاریخها در انتخابکننده تاریخ | number | 1 |
| dayClassName | اعمال className به روزها بر اساس آرگومانها | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | اعمال استایل به روزها بر اساس آرگومانها | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultMonth | ماه پیشفرض برای DatePickerRange بدون کنترل | Date | - |
| defaultView | نمایش پیشفرض DatePickerRange | 'date' | 'month' | 'year' | 'date' |
| disabledDate | مشخص کردن تاریخی که قابل انتخاب نیست | (date: Date) => boolean | - |
| disableOutOfMonth | آیا روزهایی که خارج از ماه دادهشده هستند غیرفعال شوند | boolean | false |
| enableHeaderLabel | آیا غیرفعال کردن برچسب هدر برای تغییر نمای تاریخ مجاز است | boolean | true |
| firstDayOfWeek | روز اول هفته | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | آیا روزهایی که خارج از ماه دادهشده هستند پنهان شوند | boolean | false |
| hideWeekdays | آیا روزهای هفته پنهان شوند | boolean | false |
| isDateFirstInRange | هایلایت کردن تاریخ به عنوان اولین تاریخ در یک بازه | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateInRange | هایلایت کردن تاریخ در یک بازه | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateLastInRange | هایلایت کردن تاریخ به عنوان آخرین تاریخ در یک بازه | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| labelFormat | فاصلهگذاری بین نمایش تاریخها در ورودی | string | '~' |
| locale | محلیسازی DatePickerRange | dayjs locale | en |
| maxDate | حداکثر تاریخ قابل انتخاب | Date | - |
| minDate | حداقل تاریخ قابل انتخاب | Date | - |
| monthLabelFormat | فرمت برچسب ماه | string | 'YYYY' |
| onChange | تابع برگشتی هنگام انتخاب تاریخ | function(date: Date) | - |
| onDayMouseEnter | تابع برگشتی هنگام حرکت ماوس روی تاریخ | function(date: Date) | - |
| paginateBy | صفحهبندی بر اساس تعداد نمایشها | number | dateViewCount | 1 |
| preventFocus | ممانعت از فوکوس هنگام کلیک | boolean | false |
| range | هایلایت کردن بازه تاریخ دادهشده | [Date | null, Date | null] | - |
| renderDay | رندر کردن عنصر سفارشی برای روزها بر اساس پارامترهای دادهشده | (date: Date) => ReactNode | false |
| value | مقدار تقویم (کنترلشده) | Date | - |
| weekdayLabelFormat | فرمت نمایش روزهای هفته | string | 'dd' |
| weekendDays | مشخص کردن روزهای تعطیلات آخر هفته | number[] | [0, 6] |
| yearLabelFormat | فرمت برچسب سال | string | 'YYYY' |
تقویم محدوده (RangeCalendar)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| dateViewCount | تعداد نمایش تاریخها در پیکر | number | 1 |
| dayClassName | اعمال کلاس برای روزها براساس آرگومان | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | اعمال استایل برای روزها براساس آرگومان | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultMonth | ماه پیشفرض برای DatePickerRange غیرکنترلی | Date | - |
| defaultView | نمای پیشفرض DatePickerRange | 'date' | 'month' | 'year' | 'date' |
| disabledDate | مشخص کردن تاریخهایی که قابل انتخاب نیستند | (date: Date) => boolean | - |
| disableOutOfMonth | آیا روزهای خارج از ماه دادهشده غیرفعال شوند؟ | boolean | false |
| enableHeaderLabel | آیا برچسب هدر برای تغییر نما غیرفعال شود؟ | boolean | true |
| firstDayOfWeek | اولین روز هفته | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | آیا روزهای خارج از ماه دادهشده مخفی شوند؟ | boolean | false |
| hideWeekdays | آیا روزهای هفته مخفی شوند؟ | boolean | false |
| isDateFirstInRange | هایلایت کردن تاریخ به عنوان اولین تاریخ در یک بازه | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateInRange | هایلایت کردن تاریخ در یک بازه | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateLastInRange | هایلایت کردن تاریخ به عنوان آخرین تاریخ در یک بازه | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| labelFormat | فاصلهگذاری بین نمایش تاریخها در ورودی | string | '~' |
| locale | محلیسازی DatePickerRange | dayjs locale | en |
| maxDate | حداکثر تاریخ قابل انتخاب | Date | - |
| minDate | حداقل تاریخ قابل انتخاب | Date | - |
| monthLabelFormat | فرمت برچسب ماه | string | 'YYYY' |
| onChange | تابع برگشتی هنگام انتخاب تاریخ | function(date: Date) | - |
| onDayMouseEnter | تابع برگشتی هنگام حرکت ماوس روی تاریخ | function(date: Date) | - |
| paginateBy | صفحهبندی بر اساس تعداد نمایشها | number | dateViewCount | 1 |
| preventFocus | ممانعت از فوکوس هنگام کلیک | boolean | false |
| range | هایلایت کردن بازه تاریخ دادهشده | [Date | null, Date | null] | - |
| renderDay | رندر کردن عنصر سفارشی برای روزها بر اساس پارامترهای دادهشده | (date: Date) => ReactNode | false |
| singleDate | فقط یک تاریخ میتواند انتخاب شود | boolean | false |
| value | مقدار تقویم (کنترلشده) | [Date | null, Date | null] | - |
| weekdayLabelFormat | فرمت نمایش روزهای هفته | string | 'dd' |
| weekendDays | مشخص کردن روزهای تعطیلات آخر هفته | number[] | [0, 6] |
| yearLabelFormat | فرمت برچسب سال | string | 'YYYY' |